WEB前端开发学习----2.HTML表格table标签

css没用流行之前，网页都是用表格，也就是table标签制作的。虽然现在不用table做网页了，但是我们还是应该掌握这个标签。</span>

先给出最表格的基本格式：

<table>     <tr>         <tb>         </tb>     </tr><table>

  其中<tr>为行标签，即表格的行。<td>为单元格数据标签。也就是说一个表格为3行3列，则有3个<tr>标签，3个<td>标签。

<pre name="code" class="html">        <pre name="code" class="html"><span style="white-space:pre"></span><table border="1">

<caption>这是个3行3列的表格</caption>

<tr><td>第1行第1列</td><td>第1行第2列</td><td>第1行第3列</td></tr><tr><td>第2行第1列</td><td>第2行第2列</td><td>第2行第3列</td></tr><tr><td>第3行第1列</td><td>第3行第2列</td><td>第3行第3列</td></tr></table>

caption属性为表格的标题。为了好看，我在这里border属性是给表格加上了边框。也可以不加，默认是没有的。

跨行列表格 

rowspan 跨行属性 假如跨两行则为<td rowspan="2">

colspan 跨列属性

cellpadding 单元格的填充

cellspacing 单元格之间的空间

注意第三个表格，边框只有1px.

思路：将表格背景设为黑色，然后将单元格背景设为白色，单元格无边框，这样覆盖在表格上，且单元格之间距离为零，就可得到此效果。

代码如下：

<table align="center" border="1" width="500px"><caption>这是正常成绩表</caption><tr><th colspan="2">姓名</th><td align="right">小明</td><td align="right">小花</td></tr><tr><th rowspan="3">学</br>科</th><td>语文</td><td align="right">100</td><td align="right">98</td></tr><tr><td>数学</td><td align="right">96</td><td align="right">97</td></tr><tr><td>外语</td><td align="right">90</td><td align="right">100</td></tr></table><br/><table align="center" border="1" width="500px" cellspacing="0"><caption>这是粗边框成绩表（1px框）</caption><tr><th colspan="2">姓名</th><td align="right">小明</td><td align="right">小花</td></tr><tr><th rowspan="3">学</br>科</th><td>语文</td><td align="right">100</td><td align="right">98</td></tr><tr><td>数学</td><td align="right">96</td><td align="right">97</td></tr><tr><td>外语</td><td align="right">90</td><td align="right">100</td></tr></table><br/><table align="center" bgcolor="black" width="500px" cellspacing="1"><caption>这是细边框成绩表（1px框）</caption><tr><th bgcolor="white" colspan="2">姓名</th><td bgcolor="white" align="right">小明</td><td bgcolor="white" align="right">小花</td></tr><tr><th bgcolor="white" rowspan="3">学</br>科</th><td bgcolor="white">语文</td><td bgcolor="white" align="right">100</td><td bgcolor="white" align="right">98</td></tr><tr><td bgcolor="white">数学</td><td bgcolor="white" align="right">96</td><td bgcolor="white" align="right">97</td></tr><tr><td bgcolor="white">外语</td><td bgcolor="white" align="right">90</td><td bgcolor="white" align="right">100</td></tr></table>