表格、列表的学习（带案例）-CSDN博客

本文链接：https://blog.csdn.net/2402_86247394/article/details/142448367

一、表格

表格主要用来更加规整，有条理的展示数据。让数据看起来简单明了，是用来展示数据的，不是布局的。

1.1表格的元素

元素	作用
<table></table>	定义表格
<caption></caption>	定义表格的标题
<tr>	定义表格的行，子元素只有<td><th>
<th>	定义表格页眉
<col>	为列表中的列定义属性值
<colgroup>	对表格进行格式化

<td>	定义单元格，colspan（跨列合并） rowspan（跨行合并），直接等于合并个数<td colspan=”2”></td>）用于合并单元格

1.2表格的相关属性

属性	属性值	描述
align	left（左边) center(中间）right（右边）	表格相对周围元素的对齐方式
border	1或者“ ”	表格的边框，默认为“ ”，没有边框
cellpadding	像素值	单元格的边缘与内容之间的空白，默认为1像素
cellspacing	像素值	单元格与单元格之间的空白，默认为2像素
width	像素或百分比	表格的宽度

例子：制作一个三年一班的课表

这个属性就可以直接写在元素的尖括号里，用空格隔开。比如，align，还有合并的rowspan，是跨行的，（就是把第二行和第三行合并就是跨行），详细操作请看代码：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0"
    <title></title>
</head>
<body>
   <table border="1">
    <caption>三年一班课表</caption>
        <tr align="center">
            <th></th>
            <th>星期一</th>
            <th>星期二</th>
            <th>星期三</th>
            <th>星期四</th>
            <th>星期五</th>
        </tr>
        <tr align="center">
            <td >上午</td>
            <td >语文</td>
            <td >数学</td>
            <td >语文</td>
            <td >语文</td>
            <td >语文</td>
        </tr>
        <tr align="center">
            <td >语文</td>
            <td >数学</td>
            <td >语文</td>
            <td >语文</td>
            <td >语文</td>
        </tr>
        <tr align="center">
            <td rowspan="2">下午</td>
            <td >语文</td>
            <td >数学</td>
            <td >语文</td>
            <td class=>语文</td>
            <td >语文</td>
        </tr>
        <tr align="center">
            <td>语文</td>
            <td>数学</td>
            <td>语文</td>
            <td>语文</td>
            <td>语文</td>
        </tr>
</body>
</head>
</html>

这个就是代码写出来的表格效果：

1.3结构标签

在表格标签中，使用：<thead>标签 表格的头部区域，子元素仅有<td>和<th>、 <tbody>标签表格的主体区域，子元素仅有<td>和<th>。<tfoot>标签表示表格页脚，子元素仅有<td>和<th>。

因为我们在制作表格时，它的代码比较多，所以使用这个标签制作表格，更加简洁，更好的分辨表格的结构。

给到一个实例看下效果：它的子元素只有<td><th>,就不用<tr>了。

小说排行榜

这个实例需要用到前面学过的空链接，这里可以回想一下空链接的格式。

还用写出<colgroup> <col>，cellpadding，cellspacing 的用法，给到style的属性来设置表格的背景颜色

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0"
    <title></title>
<body>
   <table border="5" align="left" cellspacing="5" cellpadding="3" style="background-color: rgb(196, 238, 238);">
    <caption>小说排行榜</caption>
    <colgroup>
        <col width="50">
        <col width="80">
        <col width="50">
        <col width="80">
        <col width="80">
        <col width="120">
    </colgroup>
    <thead>
            <th>排名</th>
            <th>关键词</th>
            <th>趋势</th>
            <th>今日热搜</th>
            <th>最近七日</th>
            <th>相关链接</th>
    </thead>
    <tbody>
        <td>1</td>
        <td>鬼吹灯</td>
        <td>下降</td>
        <td>345</td>
        <td>123</td>
        <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
   </tbody>
   <tbody>
        <td>2</td>
        <td>盗墓笔记</td>
        <td>下降</td>
        <td>124</td>
        <td>654123</td>
        <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
    </tbody>
    <tbody>
        <td>3</td>
        <td>西游记</td>
        <td>上升</td>
        <td>212</td>
        <td>75462</td>
        <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
    </tbody>
    <tbody>
        <td>4</td>
        <td>东游记</td>
        <td>上升</td>
        <td>23</td>
        <td>7546</td>
        <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
    </tbody>
    <tbody>
        <td>5</td>
        <td>甄嬛传</td>
        <td>下降</td>
        <td>121</td>
        <td>7676</td>
        <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
    </tbody>
    <tbody>
        <td>6</td>
        <td>水浒传</td>
        <td>上升</td>
        <td>2122455</td>
        <td>7546211</td>
        <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
    </tbody>
    <tbody>
        <td>7</td>
        <td>三国演义</td>
        <td>上升</td>
        <td>234</td>
        <td>7562</td>
        <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
    </tbody>
   </table>
</body>
</head>
</html>

根据这个图片可以看出我给到的属性值的体现，边框，单元格与文字，单元格之间的距离，这个自己可以随意给到值看一下效果，相关链接呢，就是直接给的空链接。这个空连接的知识不了解的话，可以看下上一篇文章。

二、列表

列表和上面的表格不一样，是用来布局的。列表分为三类：无序列表，有序列表，自定义列表。

2.1、列表的元素

<ul>	定义无序列表
<ol>	定义有序列表
<li>	定义列表项目，<li>是<ul><ol>的子元素
<dl>	自定义列表，子元素只有<dt><dd>
<dt>	定义标题列表项
<dd>	定义列表项目

2.2、属性

type属性

1）无序的属性：定义形状符号，属性值为 disc（点）、square（方块）、circlr（圆，默认）、none（无）

2）有序的属性：定义序列的样式，属性值为数字，英文罗马，罗马数，可以和start属性结合，定义开始的位置。

2.3无序列表

1、语法样式：

<ul type="square">
     <li>列一</li>
     <li>列二</li>
</ul>

代码效果：

type定义的就是前面图标的形状，自己可以试下看看每一个的效果。

注意：

1）无序列表，是没有顺序主次之分的，都是并列的；有序就和他相反。

2）<ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。<li></li>之间相当于一个容器空间，可以放所有的元素

2.4有序列表

1、定义：是有序排列顺序的列表，按照一定的顺序排列定义。

2、语法格式：

<ol type="1" start="3">
        <li>有序1</li>
        <li>有序2</li>
</ol>

type给到1就是用数字排序，给到英文罗马就是如下

这个start的用法就是从第几个开始，我这里给到了 3 ，所以我这个有序序列就是从3开始的。当我给到1的时候，就是下面这样了，这个在用的时候就按需给到就行了

2.5自定义列表

1、定义：用于对名词进行解释和描述，自定义列表的列表项前没有任何项目符号

2、语法格式：

<dl>
      <dt>学生名</dt>
      <dd>张三</dd>
      <dd>李四</dd>
</dl>

结束

学到了吧，消化一下，有什么问题可私信。表单的内容比较多，下一篇详细学习。