表
表是十分有用的,用它存储表状的数据更易于阅读.当你想用行列来显示信息时---你猜到了,<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属性