您的位置：首页 > Web前端 > CSS

HTML/CSS基础教程 二

2014-05-19 17:09 357 查看

表

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


修改后:

BATceo
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属性
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航