目录
3-1 最基本的表
3-2 连接项目
3-3 使表格边框更细
3-4 上彩色
3-1 最基本的表
以下标签主要用于创建表。
- <table> … 整个表格
- <tr> … 表格的一行
- <td> … 表格的 1 个单元格（正方形）
<table border=1><tbody>
<tr><td>单元格1</td><td>单元格2</td><td>单元格3</td></tr>
<tr><td>单元格4</td><td>单元格5</td><td>单元格6</td></tr></tbody>
</table>这是在浏览器中查看时的样子：
单元格1 单元格2 单元格3 单元格4 单元格5 单元格6
3-2 连接项目
<td colspan= n > 允许您向右跨越n 个单元格。
<table border=1><tbody>
<tr><td colspan=2>单元格1</td><td>单元格2</td></tr>
<tr><td>单元格3</td><td>单元格4</td><td>单元格5</td></tr></tbody>
</table>这是在浏览器中查看时的样子：
单元格1 单元格2 单元格3 单元格4 单元格5
<td rowspan= n > 允许您垂直跨越 n 个单元格。
<table border=1>
<tr><td rowspan=2>单元格1</td><td>单元格2</td><td>单元格3</td></tr>
<tr><td>单元格4</td><td>单元格5</td></tr></tbody>
</table>这是在浏览器中查看时的样子：
单元格1 单元格2 单元格3 单元格4 单元格5
3-3 使表格边框更细
通过使用border-collapse，您可以使表格的边框变细。
<table border=1 style="border-collapse:collapse;"><tbody>
<tr><td>单元格1</td><td>单元格2</td><td>单元格3</td></tr>
<tr><td>单元格4</td><td>单元格5</td><td>单元格6</td></tr>
</tbody></table>这是在浏览器中查看时的样子：
单元格1 单元格2 单元格3 单元格4 单元格5 单元格6
3-4 上彩色
可以使用background-color为表格着色。
<table border=1><tbody><tbody>
<tr style="background-color:yellow"><td>单元格1</td><td>单元格2</td><td>单元格3</td></tr><tr><td style="background-color:#ffcccc">单元格4</td><td>单元格5</td><td>单元格6</td></tr></tbody>
</table>这是在浏览器中查看时的样子：
单元格1 单元格2 单元格3 单元格4 单元格5 单元格6
