08 html表格的认识和应用

php老师 · 发表于 2014-11-28 11:13:34

亲注册登录道勤网-可以查看更多帖子内容哦！（包涵精彩图片、文字详情等）请您及时注册登录-www.daoqin.net

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由 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>

复制代码

但是呢，此时效果如下：
QQ截图20141128112604.jpg

此时我们发现下面只有小小的一行，因为我们没有给他设定高度，好我们来写上它的高度。同时添加上内容
代码如下：

<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"
效果如下：

道勤主机提供365天*24小时全年全天无休、实时在线、零等待的售后技术支持。竭力为您免费处理您在使用道勤主机过程中所遇到的一切问题! 如果您是道勤主机用户，那么您可以通过QQ【792472177】、售后QQ【59133755】、旺旺【诠释意念】、微信：q792472177免费电话、后台提交工单这些方式联系道勤主机客服！如果您不是我们的客户也没问题，点击页面最右边的企业QQ在线咨询图标联系我们并购买后，我们为您免费进行无缝搬家服务，让您享受网站零访问延迟的迁移到道勤主机的服务！