HTML学习笔记（5）--表格

表格由<table>标签来定义，每个表格均有若干行，在表格中行用<tr>标签来表示 ，每一行被分成若干个单元格，每个单元格用<td>标签来表示。单元格中可以包含文本、图片、列表、段落、表单、水平线、表格等等。

<table border="1">
<tr>
<td>row 1,cell 1</td>
<td>row 2,cell 2</td>
</tr>
<tr>
<td>row 2,cell1</td>
<td>row2,cell 2</td>
</tr>
</table>

在浏览器中显示的是两行，每一行中有两列。其中border属性指定的是表格的边框。
在一些表格中会指定表头，在HTML中表格使用<th>标签表示，显示效果默认为居中加粗。如：<table border="1">
<tr>
<th>row 1,cell 1</th>
<th>row 2,cell 2</th>
</tr>
<tr>
<td>row 2,cell1</td>
<td>row2,cell 2</td>
</tr>
</table>对<th>可以也看成是一个单元格，单元格中的内容显示的时候是加粗居中显示，而<td>中的内容显示如无特殊处理则不是居中加粗显示。

在有些情况下 表格中有些单元格没有元素会出现空单元格 在一些浏览器中对空单元格的显示效果不太好，这种时候往往会添加 作为单元格的内容。如：<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td> </td>
<td>row 2, cell 2</td>
</tr>
</table>
跨行跨列的单元格

很多时候会出现下面两种情况的表格



这种图片在第一行的第二列中：电话 跨了两行 此时需要使用属性colspan 如上图使用如下代码实现：

<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>



这种图片在电话单元格中跨度为两行，此时需要使用的属性是rowspan，如上图使用如下代码实现：

<table border="1">
<tr>
<th>姓名</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">电话</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>