6.使用表格

6.1表的基本构成

表格<table>由行<tr>，列，单元格<td>三部分组成

<table>
  
  <tr>
     <td>第一行第一列单元格</td>
     <td>第一行第二列单元格</td>
  </tr>

  <tr>
     <td>第二行第一列单元格</td>
     <td>第二行第二列单元格</td>
  </tr>

</table>

6.2设置表格的标题caption

表格的标题一般位于整个表格的第一行，一个表格只能有一个标题

<caption>标题</caption>

6.3表头th

表格的表头<th>是<td>单元格的一种变体，实质上仍是一种单元格，它一般位于第一行第一列，用来表明这一行或列的内容类别
一般情况下，浏览器会以粗体和居中的样式显示<th>元素中的内容

<table>

  <tr>
     <th>第一列表头</th>
     <th>第二列表头</th>
  </tr>
  
  <tr>
     <td>第一行第一列单元格</td>
     <td>第一行第二列单元格</td>
  </tr>

  <tr>
     <td>第二行第一列单元格</td>
     <td>第二行第二列单元格</td>
  </tr>

</table>

6.4表格基本属性-宽度,高度,对齐方式

<table width="表格宽度" height="表格高度" align="对齐方式">

表格对齐方式类型

6.5表格的边框-边框宽度,边框颜色,内框宽度,边框间距

<table border="边框宽度" bordercolor="边框颜色"
    cellspacing="单元格之间距离" cellpadding="文字与边框距离">

6.6表格背景-背景颜色,背景图像

bgcolor定义的颜色可以被行，列或单元格定义的背景颜色覆盖

<table bgcolor="背景颜色">

<table background="背景图像地址">

6.7表格的行<tr>属性-高度,边框颜色,行背景,水平对齐方式,垂直对齐方式

<tr height="行的高度" bordercolor="边框的颜色" bgcolor="背景颜色" 
   background="背景图像地址" align="水平对齐方式" valign="垂直对齐方式">

6.8表格的<td>单元格属性-宽度,高度,水平跨度,垂直跨度,对齐方式,单元格背景,边框颜色,亮边框颜色,暗边框颜色

<td width="单元格宽度" height="单元格高度" 
colspan="跨度的列数" rowspan="跨度的行数" align="水平对齐方式" valign="垂直对齐方式"  
bgcolor="背景颜色" background="背景图像地址"  bordercolor="边框的颜色" 
bordercolorlight="亮边框的颜色" bordercolordark="暗边框的颜色">

水平对齐方式：left，center，right
垂直对齐方式：top，middle，bottom

6.9表格的结构

1.表格的表首标记<thead>

用于定义表格最上端表首的样式，可以设置背景颜色，文字对齐方式，文字对齐方式，垂直对齐方式等

<thead bgcolor="" align="" ...>
...
</thead>

说明：在该语法中，bgcolor，align，valign的取值范围与单元格中的设置方法相同。在<thead>标记内可以包含<td>，<th>，<tr>标记，而一个表元素只能有一个<thead>标记

2.表格的表主体标记<tbody>

用于统一设计表主体部分的样式，标记为<tbody>

<tbody bgcolor="" align="" ...>
...
</tbody>

说明：在该语法中，bgcolor，align，valign的取值范围与<thead>标记中的相同。一个表元素只能有一个<tbody>标记

3.表格的表尾标记<tfoot>