HTML表格

表格由<table>标签定义，每个表格均有若干行（有<tr>标签定义），<td>标签定义表格中的数据，数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等

实例：

<table border=”1”> 







<tr> 



<td>第一行第一列</td> 



<td>第一行第二列</td> 



</tr> 



<tr> 



<td>第二行第一列</td> 



<td>第二行第二列</td> 



</tr> 



</table>

HTML表格和边框属性

如果不定义边框属性，则表格将不显示边框，有时候很有用，但大多数时候，我们希望表格显示边框。

可以使用边框属性border来定义表格边框

HTML表格表头

表格的表头由<th>标签定义

大多数浏览器会把表头显示为粗体文本

实例：

<table border=”1”> 







<tr> 



<th>第一行</th> 



<td>第一行第一列</td> 



<td>第一行第二列</td> 



</tr> 



<tr> 



<th>第二行</th> 



<td>第二行第一列</td> 



<td>第二行第二列</td> 



</tr> 



</table>

跨行跨列的表格

在HTML文档中，我们需要跨行或者跨列来布局表格，因此跨行可以使用colspan属性，跨列使用rowspan属性，属性值为跨行或跨列的个数

实例：

<h4>跨两列表格演示</h4>

<table border=”1”> 







<tr> 



<th>第一行</th> 



<td>第一行第一列</td> 



<td colspan="2">第一行第二列</td> 



</tr> 



<tr> 



<th>第二行</th> 



<td>第二行第一列</td> 



<td>第二行第二列</td> 



<td>第二行第三列</td> 



</tr> 



</table> 



<h4>跨两行表格演示</h4> 



<table border=”1”> 



<tr> 



<td rowspan="2">第一行</td> 



<td>第一行第一列</td> 



<td>第一行第二列</td> 



</tr> 



<tr> 



<td>第二行第一列</td> 



<td>第二行第二列</td> 



</tr> 



</table>

HTML表格边框与距离

HTML表格边框由cellpadding属性来定义表格边框，表格距离可以用cellspacing属性来定义

实例：

<h4>没有单元格边距:</h4> 







<table border="1"> 



<tr> 



  <td>1</td> 



  <td>2</td> 



</tr>    



<tr> 



  <td>1</td> 



  <td>2</td> 



</tr> 



</table> 



 



<h4>有单元格边距:</h4> 



<table border="1"  



cellpadding="10"> 



<tr> 



  <td>1</td> 



  <td>2</td> 



</tr>    



<tr> 



  <td>1</td> 



  <td>2</td> 



</tr> 



</table> 



 



<h4>无单元格距离</h4> 



<table border="1"> 



<tr> 



  <td>1</td> 



  <td>2</td> 



</tr>    



<tr> 



  <td>1</td> 



  <td>2</td> 



</tr> 



</table> 



 



<h4>有单元格距离</h4> 



<table border="1" cellspacing="10"> 



<tr> 



  <td>1</td> 



  <td>2</td> 



</tr>    



<tr> 



  <td>1</td> 



  <td>2</td> 



</tr> 



</table>