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>