[TOC] >[info]表格由 `<table>` 标签来定义。每个表格均有若干行（由` <tr>` 标签定义），每行被分割为若干单元格（由 `<td>` 标签定义）。字母` <td>` 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。 ~~~ <table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table> ~~~ **效果如下：** <table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table> ## 跨行或跨列的表格单元格 ### 跨列 ~~~ <table border="1"> <tr> <th>姓名</th> <th colspan="2">电话</th> </tr> <tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td> </tr> </table> ~~~ **效果如下：** <table border="1"> <tr> <th>姓名</th> <th colspan="2">电话</th> </tr> <tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td> </tr> </table> **例子解释** 属性`colspan`横跨的列数 （合并列）。 ### 跨行 ~~~ <table border="1"> <tr> <td>姓名</td> <td>Bill Gates</td> </tr> <tr> <td rowspan="2">电话</td> <td>555 77 854</td> </tr> <tr> <td>555 77 855</td> </tr> </table> ~~~ **效果如下：** <table border="1"> <tr> <td>姓名</td> <td>Bill Gates</td> </tr> <tr> <td rowspan="2">电话</td> <td>555 77 854</td> </tr> <tr> <td>555 77 855</td> </tr> </table> **例子解释** 属性`rowspan`横跨的行数 ## 表格中的空单元格 >[info] 在一些浏览器中，没有内容的表格单元显示得不太好。如果某个单元格是空的（没有内容），浏览器可能无法显示出这个单元格的边框。为了避免这种情况，在空单元格中添加一个空格占位符，就可以将边框显示出来。 * * * * * >[danger]**综合运用**：把所讲的全部知识过一下，通过以上学习内容，运用表格标签和表单标签，布出下面简历。