HTML笔记（HTML元素-表格与列表）

1 HTML表格

1.1 HTML创建表格

表格是由

<table>

元素来定义的，内含

<tr>

以及

<td>

元素，

<tr>

元素负责行，

<td>

为单元格。而表格的表头用

<th>

来定义，多数浏览器会将其显示为粗体字。

它的具体操作就与CSS中的表格布局差不多，要多结合理解哦。

使用

<table>

标记开始这个表格

使用

<caption>

定义表格标题

使用

<tr>

元素定义开始第一行或另起一行

使用

<td>

元素或者

<th>

表头元素定义单元格

<td>

或

<th>

的

colspan

属性以及

rowspan

属性定义合并单元格：

colspan

设置单元格可横跨的列数

rowspan

设置单元格可横跨的行数

<table>
<tr>
<th>姓名</th>
<th>毕业院校</th>
</tr>
<tr>
<td rowspan="2">Seiei</td>
<td>校名1</td>
</tr>
<tr>
<td>校名2</td>
</tr>
</table>

1.2 CSS修饰表格

1.2.1 定义边框

当为表格添加边框样式后，会发现每个单元格之间有边框间距。

想要取消这边框间距，除了像CSS实现表格布局那样定义

border-spacing

属性外，还可以定义

<table>

元素中的

border-collapse

属性。

table {
border-collapse:collapse;
}

1.2.2 定义颜色

想要定义隔行颜色时，可以使用伪类选择器

nth-child

,按照自定义的数字顺序标准选择出想要的行数：

tr:nth-child(oven) {
background-color:yellow;
}

1.2.3 定义对齐

就像是CSS格式布局一样，表格对齐文本除了

text-align

属性还有

vertical-align

属性

table {
vertical-align:top;
}

2 HTML列表

HTML 支持有序、无序和定义列表

2.1 无序列表(unordered list)

无序列表使用粗体圆点（典型的小黑圆圈）进行标记，可用

<ul>

标记开始定义无序列表，

<li>

元素定义列表项(list item)，如：

<ul>
<li>monday</li>
<li>tuesday</li>
<li>wednesday</li>
</ul>

此时除了一些常规的CSS样式外，还可以定义

list-style-type

属性更换粗体圆点标记，

li {
list-style-type:circle;
}

其中属性值分别为：

disc：默认黑色圆点

circle：空心圆点

square：实心矩形

none

当然也可以使用

list-style-image

属性自定义图片：

li {
list-style-image:url(url);
}

如果希望多出的第二行文本不要凸出标记就可以定义

list-style-position

属性：

inside：文本可以凸出标记

outside： 文本不能凸出标记

li {
list-style-position:inside;
}

2.2 有序列表(orderde list)

使用

<ol>

标记开始定义无序列表，

<li>

元素定义列表项(list item)。如：

<0l>
<li>monday</li>
<li>tuesday</li>
<li>wednesday</li>
</0l>

其中

list-style-type

属性常用的值包括：

decimal ：十进制数

upper-alpha ：大写字母

lower-alpha ：小写字母

upper-roman ：大写罗马数字

lower-roman ：小写罗马数字

2.3 定义列表

使用

<dl>

标记开始定义无序列表，

<dt>

元素定义一级列表项，

<dd>

定义二级列表项。如：

<dl>
<dt>手机</dt>
<dd>苹果</dd>
<dt>电脑</dt>
<dd>外星人</dd>
</dl>