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

【HTML】对于表格的修饰

2017-04-19 09:50 447 查看

表格

使用表格基本能实现对页面元素在浏览器中随心所欲的排版定位。表格通常用来显示大量的、分类化的信息，具有表示清晰、明了的特点，使用十分广泛。

表格一般由以下几部分组成：表格名称、表格栏及表中数据。

表格的格式：

<table></table>

这是一对用来指明表格范围的标记，格式如下：
<table>
表格全部内容
</table>

表格的属性：

☆. border属性

使用表格的这一属性可以给表格加上框线。如<table border>表示
表格是有表格线的，border的线宽默认为1。没有写border则表示表

格是没有表格线的。一般用<table border=n>来设置“有线表格”和
边框宽度。n是一个具体的数字，用来指定宽度的大小，单位是“像

素”，默认为没有边框。当n为0时，也没有边框。

☆. width属性

这一属性可以用来设置“有线表格”占整个页面的相对宽度，写法为<table width=n>。n是一个具体的数字，可以是一个百分数（如

100%），也可以是一个具体的数值，单位是像素（如80，表示表格占80个像素单位的宽度）。

☆. height属性

这一属性可以用来设置“有线表格”占整个页面的相对高度。其用法与<table width=n>相似。
使用相对方式来设置表格大小时，浏览器窗口大小的变化会影响到表格大小的变化。

☆. cellspacing属性

这一属性可以用来设置有线表格的单元格线的宽度，用法为<table cellspacing=n>。n是一个具体的数值，单位是像素。

☆. cellpadding属性

这一属性可以用来设置单元格线与数据之间的距离，用法为<table cellpadding=n>。n为数值，单位是像素，默认值是1。

☆.

<caption>和</caption>

这是一对用来指明表格标题的标记，常用格式如下：
<caption>   表格标题内容   </caption>

☆.

<tr>和</tr>

这对标记用来指明表格一行的内容。这一行可以是表格的栏目，也可以是数据。

☆.

<th>和</th>

这对标记用来指明表格栏目行中的一项。一行可以由多项组成，必须嵌套在<tr>与</tr>之中使用。由此标记指定的栏目，文字会突出显示。

☆.

<td>和</td>

这对标记用来指明表格数据行中的一项。一行可以由多项组成，它也必须嵌套在<tr>与</tr>之中使用。

☆.

align属性

设置水平方向的位置：align=left、align=center 或  align=right

☆.

nowrap属性

超过一行，浏览器默认会自动换行显示。使用该属性进行屏蔽。

☆.

width属性

使用此属性可以指定宽度。具体用法与在<table>中一样。

☆.

valign属性

指定垂直方向的位置<valign=f>，f取值：top、middle或bottom

☆.

colspan属性

实现单元格的横向合并，格式如: <colspan=n>

☆.

rowspan属性

实现单元格的纵向合并，格式如: <rowspan=n>

代码演示：

<!DOCTYPE html>
<html>
<head>
<title>演示table标记</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>

<body>
<table border="1" cellspacing="0" cellpading="5" width="50%" height=250>
<caption>这是表格的标题</caption>
<tr><th align="left" rowspan="1">姓名</th><th align="right">年龄</th><th >电话</th></tr>
<tr><td valign="bottom">Jack</td><td>23</td><td>12345678910</td></tr>
<tr><td>Tom</td><td>21</td><td>12345678910</td></tr>
<tr><td>Rose</td><td>22</td><td>12345678910</td></tr>
<tr><td>张三</td><td>24</td><td>12345678910</td></tr>
</table>
</body>

</html>

运行结果：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html

相关文章推荐

新的分享

章节导航