使用表格基本能实现对页面元素在浏览器中随心所欲的排版定位。表格通常用来显示大量的、分类化的信息,具有表示清晰、明了的特点,使用十分广泛。
表格一般由以下几部分组成:表格名称、表格栏及表中数据。
< table>< /table>这是一对用来指明表格范围的标记,格式如下:
< table>
表格全部内容
< /table>
border属性
使用表格的这一属性可以给表格加上框线。如
width属性
这一属性可以用来设置“有线表格”占整个页面的相对宽度,写法为
height属性
这一属性可以用来设置“有线表格”占整个页面的相对高度。其用法与
使用相对方式来设置表格大小时,浏览器窗口大小的变化会影响到表格大小的变化。
cellspacing属性
这一属性可以用来设置有线表格的单元格线的宽度,用法为
cellpadding属性
这一属性可以用来设置单元格线与数据之间的距离,用法为
< caption>和< /caption>
这是一对用来指明表格标题的标记,常用格式如下:
< caption> 表格标题内容 < /caption>
< tr>和< /tr>
这对标记用来指明表格一行的内容。这一行可以是表格的栏目,也可以是数据。
< th>和< /th>
这对标记用来指明表格栏目行中的一项。一行可以由多项组成,必须嵌套在与之中使用。由此标记指定的栏目,文字会突出显示。
< td>和< /td>
这对标记用来指明表格数据行中的一项。一行可以由多项组成,它也必须嵌套在与之中使用。
align属性:可用于< tr>、< th>及< td>
设置水平方向的位置:align=left、align=center 或 align=right
nowrap属性:可用于< th>及< td>
超过一行,浏览器默认会自动换行显示。使用该属性进行屏蔽。
width属性:可用于< th>及< td>
使用此属性可以指定宽度。具体用法与在
valign属性:可用于< th>及< td>
指定垂直方向的位置
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>我的网站2</title>
</head>
<body>
<h2>演示表格标签</h2>
<table border="1" cellspacing="0" background="a.jpg" width="45%" height="380"
align="center" >
<!-- 单元格边界线(线宽为1),cellspacing单元格之间的间隙,整个表格居中显示,背景图,宽,高,整个表格居中显示 -->
<caption title="">我的第一个表格</caption>
<tr align="center" ><!-- 一行 -->
<th><!-- 设valign值范围小的优先级高,大的优先级低 -->表头</th><th>表头1</th><!-- 表头,相比较于单元格,字体加粗 --><th>表头2</th><th>表头3</th>
</tr>
<tr align="center">
<th>表头1</th><td valign="top" align="left">单元格1-1</td><!-- 单元格--><td>单元格1-2</td><td nowrap="nowrap">单元格1-3shfgjsgfffffffffffffffffffffsfdh</td>
<!-- nowrap屏蔽自动换行 -->
</tr>
<tr align="center">
<th>表头2</th><td nowrap="nowrap">单元格2-1adgdsgdfsdhfdshfhsfd</td><td>单元格2-2</td><td>单元格2-3</td>
</tr>
</table>
</body>
</html>