HTML表格

<table> 标签 —— 表格标签

• 表格就是有行有列的一张表
• 表格由 <table> 标签来定义
• 里面的每一行用 <tr>（table row）
• 每一行里的单元格用 <td>（table data）
• 单元格里面可以放图片、文字等等，还可以嵌套其他标签

基本表格示例

<table border="1">
    <tr>
        <td>姓名</td>
        <td>年龄</td>
    </tr>
    <tr>
        <td>张三丰</td>
        <td>150</td>
    </tr>
    <tr>
        <td>西大陆</td>
        <td>3</td>
    </tr>
</table>Code language: HTML, XML (xml)

效果：

姓名	年龄
张三丰	150
西大陆	3

---

表头：<th> 标签

• 第一行相当于表的头部，可以用 <th> 来替换 <td>
• <th> 默认效果：加粗 + 居中

<table border="1">
    <tr>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    <tr>
        <td>张三丰</td>
        <td>150</td>
    </tr>
    <tr>
        <td>西大陆</td>
        <td>3</td>
    </tr>
</table>Code language: HTML, XML (xml)

---

合并单元格

纵向合并：rowspan

• rowspan 让一个单元格跨越多行

<table border="1">
    <tr>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    <tr>
        <td>张三丰</td>
        <td rowspan="2">3</td>
    </tr>
    <tr>
        <td>西大陆</td>		
    </tr>	
</table>Code language: HTML, XML (xml)

上面 rowspan="2" 的意思是：年龄这列的”3″占了两行，所以”西大陆”那行就不需要再写年龄的 <td> 了

横向合并：colspan

• colspan 让一个单元格跨越多列

<tr>
        <td colspan="2">西大陆</td>
    </tr>Code language: HTML, XML (xml)

colspan="2" 意思是这个单元格占了两列，所以这一行只需要写一个 <td> 就填满了

合并完整示例

<table border="1">
    <tr>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    <tr>
        <td>张三丰</td>
        <td rowspan="2">3</td>
    </tr>
    <tr>
        <td>西大陆</td>		
    </tr>	
    <tr>
        <td colspan="2">西大陆</td>
    </tr>	
</table>Code language: HTML, XML (xml)

效果示意：

姓名	年龄
张三丰	3（跨两行）
西大陆	↑
西大陆（跨两列）

---

表格常用标签总结

标签	全称	作用
<table>	table	定义表格
<tr>	table row	定义一行
<td>	table data	定义普通单元格
<th>	table header	定义表头单元格（加粗居中）

表格常用属性

属性	作用	示例
border	表格边框宽度	border="1"
rowspan	纵向合并单元格	rowspan="2"
colspan	横向合并单元格	colspan="2"

border 是 HTML 属性写法，现在更推荐用 CSS 控制表格样式，比如 border-collapse: collapse; 让边框合并更美观