HTML表格有序表格无序表格自定义表格的一些应用

最新推荐文章于 2022-06-13 11:26:02 发布
最新推荐文章于 2022-06-13 11:26:02 发布
阅读量194 收藏
点赞数 5
文章标签： html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jereet/article/details/117466484
版权

 示例代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body{

font-weight: bold;
}
span{
font-weight: bold;
font-size: 26px;

}
dt{
text-indent: 2em;
}
</style>
<body>
    <ol> 
       <span>搜索引擎排名</span> 
       <dl>
        <li>Google</li>
        <li>Baidu</li>
        <li>Baidu</li>
        <li>Sogou</li>
        </dl>
    </ol>
    <ul>
       <span>软件编程语言</span> 
       <dl>
        <li>Java</li>
        <li>C++</li>
        <li>Python</li>
        <li>JavaScript</li>
    </dl>
    </ul>
    <ul style="list-style: none;"> 
       <span>健康食品</span>
        <dl>水果
            <dt>苹果</dt>
            <dt>香蕉</dt>
        </dl>
        <dl>蔬菜
            <dt>西兰花</dt>
            <dt>菠菜</dt>
        </dl>
      
    </ul>
</body>
</html>

效果示例 ：

代码2如下： 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    table{
        border-collapse: collapse;
    }
    table,table tr td { 
        border:2px solid #000; 
    }
    table tr td{
        padding: 5px 10px;
    }
</style>
<body>
   
    <table width: 500px;>
       <caption style="font-weight: bold; margin: 10px;">小说排行榜</caption>
        <tr style="font-weight: bold; text-align: center;">
            <td>排名</td><td>关键词</td><td>趋势</td><td>今日搜索</td><td>最近七日</td><td>相关链接</td>
        </tr>
        <tr>
            <td>1</td><td>鬼吹灯</td><td><img src="images/up.jpg" alt=""></td>
            <td>356</td><td>3560</td>
            <td>
                <a href="">贴吧</a>
                <a href="">图片</a>
                <a href="">百科</a>
            </td>
        </tr>
        <tr>
            <td>1</td><td>鬼吹灯</td><td><img src="images/down.jpg" alt=""></td>
            <td>356</td><td>3560</td>
            <td>
                <a href="">贴吧</a>
                <a href="">图片</a>
                <a href="">百科</a>
            </td>
        </tr>
        <tr>
            <td>1</td><td>鬼吹灯</td><td><img src="images/up.jpg" alt=""></td>
            <td>356</td><td>3560</td>
            <td>
                <a href="">贴吧</a>
                <a href="">图片</a>
                <a href="">百科</a>
            </td>
        </tr>
        <tr>
            <td>1</td><td>鬼吹灯</td><td><img src="images/up.jpg" alt=""></td>
            <td>356</td><td>3560</td>
            <td>
                <a href="">贴吧</a>
                <a href="">图片</a>
                <a href="">百科</a>
            </td>
        </tr>
        <tr>
            <td>1</td><td>鬼吹灯</td><td><img src="images/up.jpg" alt=""></td>
            <td>356</td><td>3560</td>
            <td>
                <a href="">贴吧</a>
                <a href="">图片</a>
                <a href="">百科</a>
            </td>
        </tr>
        <tr>
            <td>1</td><td>鬼吹灯</td><td><img src="images/up.jpg" alt=""></td>
            <td>356</td><td>3560</td>
            <td>
                <a href="">贴吧</a>
                <a href="">图片</a>
                <a href="">百科</a>
            </td>
        </tr>
        <tr>
            <td>1</td><td>鬼吹灯</td><td><img src="images/up.jpg" alt=""></td>
            <td>356</td><td>3560</td>
            <td>
                <a href="">贴吧</a>
                <a href="">图片</a>
                <a href="">百科</a>
            </td>
        </tr>
    </table>
</body>
</html>

效果示例： 

注：表题使用<caption style="font-weight: bold; margin: 10px;">小说排行榜</caption> 实现

 

爱喝柠檬茶的猫
关注
利用UL、Li+CSS属性制作无表格实用菜单导航效果
09-25
在HTML中，列表可以通过有序列表（OL）或无序列表（UL）来实现。对于菜单导航，我们通常使用无序列表，因为其项目符号通常不需要显示。一个基础的无序列表结构如下： ```html <li><a href="#">首页</a></li> ...
html:漂亮的原生表格_HTML表格：关于它们的所有知识
08-05 2290
html:漂亮的原生表格by Alexander Gilmanov 亚历山大·吉尔马诺夫(Alexander Gilmanov) HTML表格：关于它们的所有知识 (HTML Tables: All there is to know about them) Judging by the fact that we created wpDataTables, it’s no secret that...
HTML-21：有序表格
臧小川的博客
06-13 158
有序表格
有序表的介绍
yw_2022的博客
05-13 1682
有序表
HTML-20：无序表格
臧小川的博客
06-13 164
无序表格
HTML无序列表和表格实例
web开发
02-27 1335
HTML无序列表如下 &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;无序列表.html&lt;/title&gt; &lt;/head&gt; &lt;body&gt;
css列表标签list与表格标签table详解
10-17
在这篇文章中，我们将详细了解CSS中与列表标签（list）和表格标签（table）相关的一些核心知识点。 列表标签 在HTML文档中，列表标签主要有三种类型：无序列表（ul）、有序列表（ol）以及列表项（li）。 1. 列表...
excel表格数据排序PPT课件.pptx
10-07
首先，我们要了解排序的定义，即把原本无序的数据调整为有序。在Excel中，排序主要分为两种类型：升序和降序。升序排序会按照数值从小到大或者字母从A到Z的顺序排列，而降序排序则相反，数值从大到小，字母从Z到A。 ...
excel表格数据排序.ppt
09-15
排序是指将原本无序的数据序列按照特定规则调整为有序的序列，使得数据具有一定的逻辑顺序，便于查看和分析。 2. **排序的分类**： - **升序排序**：数据从小到大排列，例如数字的升序是从小到大，字母的升序是...
第18章 CSS表格与列表
08-11
1. 列表类型：HTML提供两种列表类型，无序列表`<ul>`和有序列表`<ol>`，以及定义列表`<dl>`，用于展示术语及其解释。 2. 列表样式调整： - `list-style-type`: 更改列表项标记的类型，如圆点、数字、罗马数字等，...
html5如何实现无序排列,无序列表让li横排
weixin_36116366的博客
06-03 4217
html中的无序列表ul和li水平排列取代表格的问题怎么设在html中无序列表之间的距离垂直排列行间距：line-height:25px 水平排列：margin:0px 5px;(左右各有5像素间距) li标签内文字间距：letter-spacing:1px;html中嵌套无序列表(ul li) 间距设置问题一个嵌套的无序列表 苹果 富士 < 苹果 富士 大香蕉 烟台苹果 加个margi...
无序列表
jwz934738949的博客
03-02 2731
在网页编写的过程中，会出现有编号的内容，这就是利用列表标签来实现的。无序列表是其中最为重要的。 它的结构为： &lt;ul&gt; &lt;li&gt;xxxx&lt;/li&gt; &lt;li&gt;xxxx&lt;/li&gt; &lt;li&gt;xxxx&lt;/li&gt; &lt;/ul&gt; &lt;!DOCTYPE html&gt;
HTML5(六)有序列表、无序列表、定义列表
热门推荐
阳光小西的专栏
07-21 1万+
有序列表通常用来表示内容之间的顺序或者是重要性关系，每一个列表都分为多个子项，每一个子项都有相应的编号。 无序列表仅仅用于表示内容之间存在有并列关系，也是分为多个子项，但是子项之前没有相应的编号，只有一个原点用于标识。定义列表通常用于表示名词或者是概念的定义，每一个子项有两个部分组成，第一部分是名词或者是概念，第二部分是相应的解释和描述。<!DOCTYPE html> <html> <head>
表格及有序无序列表
weixin_30251829的博客
03-09 241
1.表格标签：table 行标签：tr 单元格：td 属性：<table border=“”表格边框“” width="宽度" cellpadding=“单元格与单元格的距离” cellspacing="单元格与单元格里内容的距离"></table> <tr align="right或left或center" bgcolor="行的背景颜色"><...
数据结构之有序表
qq_37784961的博客
06-02 510
在实现有序表时，数据项的相对位置取决于数据项之间的“大小”比较，依然采用链表实现，Node定义相同，ordererList也设置一个head来保存链表头的引用。
html 标签 表单 表格 无序列表 具体实例
weixin_47938783的博客
08-27 1803
一 、基础标签 <!DOCTYPE> :定义文档类型 为html类型 <html> 开始标签 对应结束标签 一个html 文档 <head> html 必备标签 表示头部 <meta charset="UTF-8"> 定义字符集 utf-8 中文 <title> //设置网页标题 显示在浏览器的头部 </title> </head> <body> 表示主体 </boay> <
HTML5入门之有序列表
YXGR
04-10 1万+
HTML5入门之有序列表有序列表说明语法演示------代码------效果属性reversed属性代码效果type属性代码效果start属性代码效果默认样式<ol><li>清除默认样式清除完效果 有序列表 说明 Ol标签——代表HTML有序列表，是ordered lists的缩写 Ol标签是成对出现的，以<ol>开始，</ol>结束，每一列使用&...
HTML基础篇之表格与无序列表（三）
张先生
07-01 1538
HTML基础篇（三）&lt;img&gt;图片标签的扩展 width：宽； height： 高； alt： 图片没加载出的显示的提示文本； &lt;map&gt;:图 &lt;area shape="circle"   coords="x1,y1,x2,y2(左上角和右下角)过x1,y1,r"&lt;!--src图片路径 --&gt;&lt;img src="planets.gif"
HTML列表练习：无序、有序与自定义列表的应用
在这个前端练习中，我们将关注HTML中的列表元素，包括无序列表、有序列表以及如何创建自定义列表。 列表是HTML中用于展示数据集的结构化方式，常见的列表类型有两种：无序列表（unordered list）和有序列表...
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值