Fade away

Appearance

三、表格与列表 ​

表格 ​

1. 表格 ​

现在还是较为常用的一种标签，但不是用来布局，常见显示、展示表格式数据。因为它可以让数据显示的非常的规整，可读性非常好。特别是后台展示数据的时候表格运用是否熟练就显得很重要，一个清爽简约的表格能够把繁杂的数据表现得很有条理。

2. 创建表格 ​

html
<table>
  <tr>
    <td>单元格内的文字</td>
    ...
  </tr>
  ...
</table>

2.1 table、th、tr、td， ​

他们是创建表格的基本标签

  • table：用于定义一个表格标签。
  • tr：用于定义表格中的行，必须嵌套在 table标签中。
  • th：用于定义表头，一般位于表格的第一行或第一列，并且文本加粗居中，必须嵌套在<tr></tr>标签中
  • td：用于定义表格中的单元格，必须嵌套在<tr></tr>标签中。
    • 字母 td 指表格数据（table data），即数据单元格的内容，现在我们明白，表格最合适的地方就是用来存储数据的。
    • td像一个容器，可以容纳所有的元素。

2.2 表格标题caption ​

通常这个标题会被居中且显示于表格之上。caption 标签必须紧随 table 标签之后。这个标签只存在 表格里面才有意义。你是风儿我是沙

html
<table border="1">
    <caption>我是表格标题</caption>
    <tr>
        <td>你好</td>
        <td>你好</td>
        <td>你好</td>
        <td>你好</td>
    </tr>
    <tr>
        <td>你好</td>
        <td>你好</td>
        <td>你好</td>
        <td>你好</td>
    </tr>
</table>

image-20240521094611854

3. 表格属性 ​

属性描述
border定义表格的边框粗细，默认为0
cellpadding定义每个td的内边距，默认为0
cellspacing定义每个td的外边距，默认为2
html
<table border="1" cellpadding="10" cellspacing="0">
    <caption>我是表格标题</caption>
    <tr>
        <td>你好</td>
        <td>你好</td>
        <td>你好</td>
        <td>你好</td>
    </tr>
</table>

image-20230610204820734

4. 合并单元格 ​

合并的顺序我们按照   先上 后下     先左  后右 的顺序 ,合并完之后需要删除多余的单元格。

  • 跨行合并，竖向合并：rowspan="合并单元格的个数"

  • 跨列合并，横向合并：colspan="合并单元格的个数"

1.定义一个3*3的表格

html
<table border="1" cellpadding="10" cellspacing="0">
    <tr>
        <td>你好</td>
        <td>你好</td>
        <td>你好</td>
    </tr>
    <tr>
        <td>你好</td>
        <td>你好</td>
        <td>你好</td>
    </tr>
    <tr>
        <td>你好</td>
        <td>你好</td>
        <td>你好</td>
    </tr>
</table>

image-20230610204939021

2.让第一排第一个td与第二个td合并

html
<table border="1" cellpadding="10" cellspacing="0">
    <tr>
        <td colspan="2">你好</td>
        <td>你好</td>
        <td>你好</td>
    </tr>
    <tr>
        <td>你好</td>
        <td>你好</td>
        <td>你好</td>
    </tr>
    <tr>
        <td>你好</td>
        <td>你好</td>
        <td>你好</td>
    </tr>
</table>

image-20230610205109150

会发现，单元格合并了，但是最右边的td被挤出去了，所以为了格式美观，我们需要把被挤出去的td删掉

html
<table border="1" cellpadding="10" cellspacing="0">
    <tr>
        <td colspan="2">你好</td>
        <td>你好</td>
    </tr>
    <tr>
        <td>你好</td>
        <td>你好</td>
        <td>你好</td>
    </tr>
    <tr>
        <td>你好</td>
        <td>你好</td>
        <td>你好</td>
    </tr>
</table>

image-20230610205236208

3.同理，我们把第二行第一个td与第三行第一个td合并，删掉第三行第三个td

html
<table border="1" cellpadding="10" cellspacing="0">
    <tr>
        <td colspan="2">你好</td>
        <td>你好</td>
    </tr>
    <tr>
        <td rowspan="2">你好</td>
        <td>你好</td>
        <td>你好</td>
    </tr>
    <tr>
        <td>你好</td>
        <td>你好</td>
    </tr>
</table>

image-20230610205420251

5. 总结表格 ​

标签名定义说明
<table></table>表格标签就是一个四方的盒子
<tr></tr>表格行标签行标签要再table标签内部才有意义
<td></td>单元格标签单元格标签是个容器级元素，可以放任何东西
<th></th>表头单元格标签它还是一个单元格，但是里面的文字会居中且加粗
<caption></caption>表格标题标签表格的标题，跟着表格一起走，和表格居中对齐
clospan 和 rowspan合并属性用来合并单元格的

table表格中标签的出现次序

caption ---- colgroup ---- thead ---- tbody ---- tfoot

5.1 数据列分组 ​

1）colgroup元素会根据从左到右的顺序依次对数据表格进行列分组

2）span属性显示指定相邻几列组成一组，span属性值默认为1，默认时仅定义一列为一组

<colgroup span="value"> </colgroup>

html
<table>
    <colgroup style="width: 100px;background-color: red;"></colgroup>
    <colgroup style="width: 200px;background-color: green;"></colgroup>
    <tr>
        <td>王小波</td>
        <td>李银河</td>
    </tr>
    <tr>
        <td>钱钟书</td>
        <td>杨绛</td>
    </tr>
    <tr>
        <td>梁思成</td>
        <td>林徽因</td>
    </tr>
</table>

image-20230610210134037

6. 表格划分结构 ​

对于比较复杂的表格，表格的结构也就相对的复杂了，所以又将表格分割成三个部分：题头、正文和脚注。而这三部分分别用:thead,tbody,tfoot来标注， 这样更好的分清表格结构。

注意：

  1. <thead></thead>：用于定义表格的头部。用来放标题之类的东西。<thead> 内部必须拥有<tr> 标签！
  2. <tbody></tbody>：用于定义表格的主体。放数据本体 。
  3. <tfoot></tfoot>放表格的脚注之类。

以上标签都是放到table标签中。

7. 规定单元格中内容的对齐方式 ​

水平对齐方式（align） ​

通过 align 属性 实现 单元格中 内容 的水平对齐align="left/center/right"

  • left 默认值，左对齐

  • center 居中对齐

  • right 右对齐

注：align属性可以写在 tr标签 和 td标签上

写在 td标签上 针对这一个单元格有效

写在 tr标签上 针对这一行单元格都有效

垂直对齐方式（valign） ​

通过 valign 属性 实现 单元格中 内容 的垂直对齐valign="top/middle/bottom"

  • top 靠上对齐

  • middle 默认值，居中对齐

  • bottom 考下右对齐

注：valign属性可以写在 tr标签 和 td标签上

写在 td标签上 针对这一个单元格有效

写在 tr标签上 针对这一行单元格都有效

8. table标签的css属性 ​

8.1 border-collapse ​

设置表格的边框模式（分离模式 / 合并模式）

设置表格的边框是否被合并为一个单一的边框，还是像在标准的 HTML 中那样分开显示

属性值：

separate：默认值，边框分离模式，边框会被分开

image-20230610211238599

collapse：边框合并模式，边框会合并为一个单一的边框

image-20230610211117068

8.2 border-spacing ​

border-spacing 设置相邻单元格的边框间的距离（仅用于“边框分离”模式）

相当于table标签属性的

属性值：length(数值+单位)

  • 一个属性值：如果定义一个 length 参数，那么定义的是水平和垂直间距

  • 两个属性值：如果定义两个 length 参数，那么第一个设置水平间距，而第二个设置垂直间距

css
table{
    border-spacing: 10px 20px;
}

image-20230610212022528

8.3 empty-cells ​

设置当单元格中没有内容时是否显示单元格（仅用于“分离边框”模式）

属性值：

  • show 默认值，显示

  • hide 不显示

html
<table border="1">
    <tr>
        <td></td>
        <td>你好</td>
        <td>你好</td>
    </tr>
</table>

empty-cells:show

image-20230610212246707

empty-cells:hide

image-20230610212310744

8.4 table-layout ​

用来显示表格单元格、行、列的算法规则

属性值：

auto

  • 默认值，列宽度由单元格内容设定(自动表格布局)

  • 在自动表格布局中，列的宽度是由列单元格中没有折行的最宽的内容设定的。

  • 此算法有时会较慢，这是由于它需要在确定最终的布局之前访问表格中所有的内容。

fixed

  • 列宽由表格宽度和列宽度设定(固定表格布局)

  • 固定表格布局与自动表格布局相比，允许浏览器更快地对表格进行布局。

  • 在固定表格布局中，水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间

    距，而与单元格的内容无关。

9. td设置为可编辑 ​

html
<td style="width: 8%;font-size:17px" contenteditable="true"></td>

加上：contenteditable="true"，这个属性在其他标签也是可用的

10.tbody加滚动条实现思路： ​

  1. 把tbody设置成display:block，然后就对其高度设置一个固定值，overflow设置成auto。

  2. 把thead的tr设置成display:block。

  3. 因为都设置成block所以要给td手动添加宽度。

  4. 考虑到 tbody 产生了滚动条，这时会影响tbody以及thead的宽度，可以采用针对tbody设置::-webkit-scrollbar进行解决。

列表 ​

容器里面装载着结构，样式一致的文字或图表的一种形式，叫列表。

列表最大的特点就是整齐 、整洁、 有序，跟表格类似，但是它可组合自由度会更高。

1. 无序列表 ul ​

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

image-20230610212658061

2. 有序列表 ol ​

  • <ol>标签中的type属性值为排序的序列号，不添加type属性时，有序列表默认从数字1开始排序。

  • 常用的type属性值分别为是1，a，A，i，I，默认为1

  • <ol reversed="reversed">中的reversed属性能够让有序列表中的序列倒序排列。

  • <ol start="3">中的start属性值为3，有序列表中的第一个序列号将从3开始排列。

html
<ol type="A"> 
  <li>列表项1</li>
  <li>列表二</li>
  <li>列表三</li>
</ol>

image-20230610212749275

2. 自定义列表 dl ​

  • 定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。
  • dt无缩进，dd有缩进
html
<dl>
  <dt>名词1</dt>
  <dd>名词1解释1</dd>
  <dd>名词1解释2</dd>
  <dt>名词2</dt>
  <dd>名词2解释1</dd>
  <dd>名词2解释2</dd>
</dl>

image-20230610212836094

表格的细线边框： ​

  • 通过表格的cellspacing="0",将单元格与单元格之间的距离设置为0，

  • 但是两个单元格之间的边框会出现重叠，从而使边框变粗

  • 通过css属性：table{ border-collapse:collapse; }

  • collapse 单词是合并的意思,border-collapse: collapse;表示相邻边框合并在一起。

html
<style>
 table {
  width: 500px;
  height: 300px;
  border: 1px solid red;
 }
 td {
  border: 1px solid red;
  text-align: center;
 }
 table, td {
  border-collapse: collapse;  /*合并相邻边框*/
 }
</style>

MIT Licensed

Copyright © 2024-present xarzhi