首页 > 代码库 > HTML/CSS基础教程 二
HTML/CSS基础教程 二
表
表是十分有用的,用它存储表状的数据更易于阅读.当你想用行列来显示信息时---你猜到了,<table>标签正是你需要的,有许多和表有关的标签,它们都以<table>开始.
表就是将一组数据用行列的形式排列,我们用<tr>标签创建一个表行(table row),<td>标签表示表数据(table date)
<!DOCTYPE html> <html> <head> <title>Table Time</title> </head> <body> <table border="1px"> <tr> <td>One</td> </tr> <tr> <td>Two</td> </tr> <tr> <td>Three</td> </tr> </table> </body> </html>
上面这段代码产生如下表格:
one |
twe |
three |
添加一列
上面创建了一个单列的表,如何添加一列呢?很简单,只要在每行添加一个数据元就可以了,例如下面的代码:
<!DOCTYPE html> <html> <head> <title>Table Time</title> </head> <body> <table border="1px"> <tr> <td>baidu</td> <td>李彦宏</td> </tr> <tr> <td>alibaba</td> <td>马云</td> </tr> <tr> <td>tencent</td> <td>马化腾</td> </tr> </table> </body> </html>
产生如下表格:
baidu | 李彦宏 |
alibaba | 马云 |
tencent | 马化腾 |
表头
我们应该在<thead>写入表头的内如,每个条目用<th>标签包裹,而将表的实际内容放入<tbody>.我们为上表添加<thead>和<tbody>,如下:
<!DOCTYPE html> <html> <head> <title>Table Time</title> </head> <body> <table border="1px"> <thead> <tr> <th>BAT</th> <th>CEO</th> </tr> </thead> <tbody> <tr> <td>baidu</td> <td>李彦宏</td> </tr> <tr> <td>alibaba</td> <td>马云</td> </tr> <tr> <td>tencent</td> <td>马化腾</td> </tr> </tbody> </table> </body> </html>
修改后:
BAT | ceo |
baidu | 李彦宏 |
alibaba | 马云 |
tencent | 马化腾 |
表的名字
我们的表没有标题,我们想在表的最上方加一个标题行,怎么做?
我们将使用<th>的colspan属性,它默认占一列,我们可以指定它占的列数,像这样:
<th colspan="3">
我们在上表中的<thead>标签下加下面的代码即可产生一个标题:
<tr> <th colspan="2">BAT and its CEO</th> </tr>
colspan=2表示占用俩列,这样我们就可以在表的上面产生这样一个标题:
BAT and its CEO |
PS:我们可以自由修改表元素的style属性
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。