[HTML]html表格制作 [大三TJB_708]

表格是html的一项非常重要功能，利用其多种属性能够设计出多样化的表格。使用表格可以使你的页面有很多意想不到的效果，使页面更加整齐美观。

1.表格指令

<table>...</table>

(0)生成表格标题指令

    <caption>....</caption>

(1)生成表格行指令

    <tr>....</tr>

(2)生成表格列指令

   <td>...</td>

  说明：可在每生成一行表格后，使这一行表格产生多个列。

  把以上指令加到前面所述的html结构中的body中，如

<!网页表格：居中>
<table border="1" width="50%" align=center>
<!表格标题>
<caption>网页标题</caption>

<!tr表示表格的一行，td表示表格的一列>
<!一下代码表明在每生成一行表格时对应几列>
<tr>
<td>11</td>
<td>12</td>
</tr>

<tr>
<td>21</td>
<td>22</td>
</tr>

则会在浏览器中生成如下表格<>：



2.表格相关属性 :

align 调整
bgcolor 背景颜色 ·
height 高度
width 宽度 ·
colspan 栏宽 ·
rowspan 栏高

由表格的属性表明，还可以增加背景颜色、表格标题、栏标题、跨栏宽、跨栏高等。

指令：

  <th>...</th> 表格栏标题 ( 表头 ) 粗体字 ( </th>可省略 )

如以下html语句（在html基本结构中的body中添加）

<!网页表格>
<table border="1" width="50%" align=center>
<!表格标题>
<caption>网页标题</caption>

<!tr表示表格的一行，td表示表格的一列>
<!一下代码表明在每生成一行表格时对应几列>
<tr><th rowspan=2>标题 1 <td>a <td>a <td>a <td>a
</tr>

<!四列>
<tr> <td>a <td>a <td>a <td>a </tr>
</tr>

<tr><th rowspan=2>标题 2 <td>a <td>a <td>a <td>a
</tr>

</table>

得到如下效果的表格



3.总结

关于表格在网页上面的显示方式，是表格各种属性的组合。

最终还要体现到设计上面去，再通过代码工具来实现。