08 html表格的认识和 应用
本帖最后由 php老师 于 2014-11-28 11:33 编辑首先我们来看这个<table></table>标签
代码如下：
<table border="1px" >
</table>这个我们就写了个表格，同时后面的border="1px"表示的其边框为1个px
好，有了框子，是不是得要有行和列啊
那么我们继续添加，代码如下：
<table border="1px">
<tr>
</tr>
<tr>那么这个<tr></tr>表示的一行，我们写了2个<tr></tr>,这样我们就表示的是有2行
此时我们呢，看到只有很小的一个，这是为什么呢？因为我们没有给这个表格设定宽度，好，我们在添加一个表格的宽度，代码如下：
<table border="1px" width="300px">
<tr>
</tr>
<tr></tr>
</table>此时，效果如下：
此时我们看到了，只有这么一行，我们不是有2行嘛。为什么只会显示一行呢？因为我们只写了行，没有把行用单元格支撑起来，好我们继续写
<td></td>这个就是单元格的标签
好我们看代码如下：<table border="1px" width="300px">
<tr>
<td height="150px"></td>
</tr>
<tr></tr>
</table>
效果如下：
这样呢，我们就给这个在第一行的<tr></tr>里面添加了个<td></td>而且这个td的单元格的宽度为150px好，我们在写多个td
代码如下：
<table border="1px" width="300px">
<tr>
<td height="150px"></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr></tr>
</table>
这样我们就在第一行当中加了4个单元格<td></td>，此时只需要给第一个td单元格设定宽度就可以了。好，效果如下
好我们给这4个单元格<td></td>写内容<table border="1px" width="300px">
<tr>
<td height="150px">1111</td>
<td>2222</td>
<td>3333</td>
<td>4444</td>
</tr>
<tr></tr>
</table>效果如下：
好，下面的我们依照上面的写出代码如下;
<table border="1px" width="300px">
<tr>
<td height="150px">1111</td>
<td>2222</td>
<td>3333</td>
<td>4444</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>但是呢，此时效果如下：
此时我们发现下面只有小小的一行，因为我们没有给他设定高度，好我们来写上它的高度。同时添加上内容
代码如下：
<table border="1px" width="300px">
<tr>
<td height="150px">1111</td>
<td>2222</td>
<td>3333</td>
<td>4444</td>
</tr>
<tr>
<td height="20px">a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
</table>效果如下：
好，我们来给大的<table></table>里面的border="1px" 来进行设置，这个表示这个大的表格有1个px ,我们来写5个像素看会出现什么情况代码如下：
<table border="5px" width="300px">
<tr>
<td height="150px">1111</td>
<td>2222</td>
<td>3333</td>
<td>4444</td>
</tr>
<tr>
<td height="20px">a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
</table>
效果如下：
如果改为border="0px"
效果如下：
页:
[1]