[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]**综合运用**:把所讲的全部知识过一下,通过以上学习内容,运用表格标签和表单标签,布出下面简历。 ![](https://box.kancloud.cn/3820d8c2115ff7cdfc085a421cd05e58_552x604.png)