HTML/CSS基础教程 二
标签：style class blog c code java
表
表是十分有用的,用它存储表状的数据更易于阅读.当你想用行列来显示信息时---你猜到了,
标签正是你需要的,有许多和表有关的标签,它们都以开始.
表就是将一组数据用行列的形式排列,我们用
标签创建一个表行(table
row),标签表示表数据(table date)
DOCTYPE html>
html>
head>
title>Table Timetitle>
head>
body>
table border="1px">
tr>
td>Onetd>
tr>
tr>
td>Twotd>
tr>
tr>
td>Threetd>
tr>
table>
body>
html>
添加一列
上面创建了一个单列的表,如何添加一列呢?很简单,只要在每行添加一个数据元就可以了,例如下面的代码:
DOCTYPE html>
html>
head>
title>Table Timetitle>
head>
body>
table border="1px">
tr>
td>baidutd>
td>李彦宏td>
tr>
tr>
td>alibabatd>
td>马云td>
tr>
tr>
td>tencenttd>
td>马化腾td>
tr>
table>
body>
html>
产生如下表格:
| baidu |
李彦宏 |
| alibaba |
马云 |
| tencent |
马化腾 |
表头
我们应该在写入表头的内如,每个条目用| 标签包裹,而将表的实际内容放入 |
.我们为上表添加和
,如下:
DOCTYPE html>
html>
head>
title>Table Timetitle>
head>
body>
table border="1px">
thead>
tr>
th>BATth>
th>CEOth>
>
thead>
tbody>
tr>
td>baidutd>
td>李彦宏td>
tr>
tr>
td>alibabatd>
td>马云td>
tr>
tr>
td>tencenttd>
td>马化腾td>
tr>
tbody>
table>
body>
html>
修改后:
| BAT |
ceo |
| baidu |
李彦宏 |
| alibaba |
马云 |
| tencent |
马化腾 |
表的名字
我们的表没有标题,我们想在表的最上方加一个标题行,怎么做?
我们将使用
的colspan属性,它默认占一列,我们可以指定它占的列数,像这样:
我们在上表中的标签下加下面的代码即可产生一个标题:
tr>
th colspan="2">BAT and its CEOth>
tr>
colspan=2表示占用俩列,这样我们就可以在表的上面产生这样一个标题:
PS:我们可以自由修改表元素的style属性
HTML/CSS基础教程 二,搜素材,soscw.com
HTML/CSS基础教程 二
标签：style class blog c code java
原文地址：http://www.cnblogs.com/ezhengnan/p/3736031.html
|
|
评论
