03 表格

表格

table - HTML（超文本标记语言） | MDN (opens new window)

<table>
  <caption></caption>
  
  <thead>
    <tr>
      <th></th>
      <th></th>
      <th></th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <td></td>
    </tr>
  </tfoot>

</table>

2020求知讲堂web前端 哔哩哔哩 (゜-゜)つロ 干杯~-bilibili (opens new window)

CSS table 样式

• 表格边框

为了使边框出现边框（基于样式），可以添加如下样式：

table, th, td { border: 1px solid blue; }

• 折叠边框

单纯给table、th 以及 td 元素添加边框，会出现双线边框，可使用 border-collapse 属性进行边框调整。

table { border-collapse: collapse; }
table, th, td { border: 1px solid blue; }

• 表格宽度和高度

通过width和height属性定义表格的宽度和高度。

/* 表格宽度设置为100%,同时将tr元素的高度设置为50px */
table { width: 100%; }
tr{ height: 50px; }

• 表格文本对齐

针对表格文本，可以对其设置对齐方式：text-align、vertical-align

text-align： 设置水平方向对齐方式。

left : 默认值，水平方向左对齐。
center ： 水平方居中对齐。
right : 水平方向右对齐。

/* 右对齐 */
td { text-align: right; }

vertical-align： 设置垂直方向对齐方式。

top : 垂直方向顶端对齐。
middle ： 垂直方向中部对齐。
bottom : 垂直方向底端对齐。

/* 底端对齐 */
td { vertical-align: bottom; }

2020求知讲堂web前端 哔哩哔哩 (゜-゜)つロ 干杯~-bilibili (opens new window)

css 列表样式

• 列表类型

无序(ul)、有序(ol)和自定义列表(dl)

ul和ol的列表项都是用li表示的，而dl是由一个dt和一个或多个dd组成的。
dl一般用来设定一个定义，比如名词解释等。dt：标题,dd：描述，用来对dt的内容进行解释并说明的。

• 样式(用来修改标识类型)

list-style-image:用图像表示标识
list-style-position:标识的位置(inside/outside(默认))
list-style-type:标识类型

CSS 列表 | 菜鸟教程 (opens new window)