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>