HTML学习-网页主体标记body(三)
2015-09-07 10:41
323 查看
网页的主体标记body包括要在浏览器显示处理的所有信息。在网页的主体标记中有很多的属性设置，包括网页的背景设置、文字属性设置和链接设置等。在<body>和</body>标签之间的内容是网页的主要内容，如<h1>、<p>、<a>、<img>等网页内容标签。本文主要介绍body中包含的网页内容标签<table>。
<table>
<tr>
<td>单元格内的文字</td>
<td>单元格内的文字</td>
</tr>
<tr>
<td>单元格内的文字</td>
<td>单元格内的文字</td>
</tr>
</table>
表格由行、列和单元格3部分组成，一般通过3个标记来创建，分别是表格标记table、行标记tr和单元格标记td。表格的各种属性都要在表格的开始标记<table>和表格的结束标记</table>之间才有效。
<tr>和</tr>分别表示行的开始和结束，在表格中包含几组<tr>...</tr>就表示该表格为几行；
<td>和</td>表示单元格的开始和结束，一行中包含几对<td>和</td>表示一行中就有几列。
表格默认无边框。
表格的标题一般位于整个表格的第1行。一个<table>表格只能含有一个表格标题。
<table>
<tr>
<th>表头的文字</th>
...
</tr>
<tr>
<td>单元格内的内容</td>
<td>单元格内的内容</td>
</td>
</tr>
</table>
表格的表头是单元格的一种变体，实质上仍是一种单元格。它一般位于第一行或第一列，用来表明这一行或列的内容类别。在一般情况下，浏览器会以粗体和居中的样式显示<th>元素中的内容。
<th>元素的起始标记必须有，但是结尾标记是可选的。
表格高度的值可以是像素值，也可以为百分比。
表格宽度的值可以是像素值，也可以为百分比。
align参数取值
默认情况下如果不指定border属性，则浏览器将不显示表格边框。只有设置border值不为0，在网页中才能显示出表格的边框。
border属性设置的表格边框只能影响表格四周的边框宽度，不会影响单元格之间边框尺寸。
边框的宽度不能为0，否则bordercolor属性值无意义。
bordercolor值可以是一个已命名的颜色，也可以是一个十六进制的颜色值。
表格的内框宽度属性cellspacing用于设置表格内部每个单元格之间的间距。
内框宽度的单位是像素。
在默认情况下，单元格内的内容会紧贴着表格的边框，可以使用cellpadding来设置单元格边框与单元格里的内容之间的距离。
单元格的内容与边框的距离以像素为单位。
表格的背景颜色属性bgcolor是针对整个表格的，bgcolor定义的颜色可以被行、列或单元格定义的背景颜色所覆盖。
背景图像地址可以为相对地址，也可以为绝对地址。
默认设置为透明色，即和文档背景颜色相同。
bgcolor可以为颜色名或16进制等命名方法。
background可以选择图像的相对地址，也可以选择绝对地址。
行的bgcolor和background属性仅作用于当前行，这里设置的bgcolor颜色可以覆盖<table>的bgcolor和background属性，不过会被单元格定义的背景颜色所覆盖。
align可以取值为：left、center、right。
<tr>的valign属性用来控制表格当前行的垂直对齐方式。垂直对齐方式有三种，分别是top（文字顶部对齐）、middle（文字居中对齐）和bottom（文字底部对齐）。
默认情况下，单元格的宽度和高度会根据内容自动调整，也可以通过width和height设置单元格的宽度和高度。
单元格高度和宽度的单位是像素。
在设计表格时，有时候需要将两个或更多的相邻单元格组合成一个单元格。
单元格除了可以在水平方向上跨列，还可在垂直方向上跨行。
单元格的对齐方式设置与行的对齐方式设置方法相似。
水平对齐方式的取值可以是left、center或right。垂直对齐方式的取值可以是top、middle或bottom。
<td bordercolorlight="亮边框的颜色">
<td bordercolordark="暗边框的颜色">
背景图像的地址可以是绝对地址，也可以是相对地址。
<thead bgcolor="背景颜色" align="对齐方式">
...
</thead>
用于定义表格最上端表首的样式，可以设置背景颜色、文字对齐方式、文字的垂直对齐方式等。
在该语法中，bgcolor、align、valign的取值范围与单元格中的设置方法相同。在<thead>标记内还可以包含<td><th>和<tr>标记，而一个表元素中只能有一个<thead>标记。
<tbody bgcolor="背景颜色" align="对齐方式">
...
</tbody>
用于统一设计表主体部分的样式。
在该语法中，bgcolor、align、valign的取值范围与<thead>中的相同。一个表元素中只能有一个<tbody>标记。
<tfoot bgcolor="背景颜色" align="对齐方式">
...
</tfoot>
用于定义表尾样式。
在该语法中，bgcolor、align、valign的取值范围与<thead>中的相同。一个表元素中只能有一个<tfoot>标记。
创建表格
表格的基本构成table、tr、td
语法为：<table>
<tr>
<td>单元格内的文字</td>
<td>单元格内的文字</td>
</tr>
<tr>
<td>单元格内的文字</td>
<td>单元格内的文字</td>
</tr>
</table>
表格由行、列和单元格3部分组成，一般通过3个标记来创建，分别是表格标记table、行标记tr和单元格标记td。表格的各种属性都要在表格的开始标记<table>和表格的结束标记</table>之间才有效。
<tr>和</tr>分别表示行的开始和结束，在表格中包含几组<tr>...</tr>就表示该表格为几行；
<td>和</td>表示单元格的开始和结束，一行中包含几对<td>和</td>表示一行中就有几列。
表格默认无边框。
设置表格的标题caption
语法为：<caption>表格的标题</caption>表格的标题一般位于整个表格的第1行。一个<table>表格只能含有一个表格标题。
表头th
语法为：<table>
<tr>
<th>表头的文字</th>
...
</tr>
<tr>
<td>单元格内的内容</td>
<td>单元格内的内容</td>
</td>
</tr>
</table>
表格的表头是单元格的一种变体，实质上仍是一种单元格。它一般位于第一行或第一列，用来表明这一行或列的内容类别。在一般情况下，浏览器会以粗体和居中的样式显示<th>元素中的内容。
<th>元素的起始标记必须有，但是结尾标记是可选的。
表格的基本属性
表格高度height
语法为：<table height="表格高度">表格高度的值可以是像素值，也可以为百分比。
表格宽度width
语法为：<table width="表格宽度">表格宽度的值可以是像素值，也可以为百分比。
表格对齐方式align
语法为：<table align="对齐方式">| 属性值 | 说明 |
| left | 整个表格在浏览器页面中左对齐 |
| center | 整个表格在浏览器页面中居中对齐 |
| right | 整个表格在浏览器页面中右对齐 |
表格的边框
表格的边框宽度border
语法为：<table border="边框宽度">默认情况下如果不指定border属性，则浏览器将不显示表格边框。只有设置border值不为0，在网页中才能显示出表格的边框。
border属性设置的表格边框只能影响表格四周的边框宽度，不会影响单元格之间边框尺寸。
表格的边框颜色bordercolor
语法为：<table border="边框宽度" bordercolor="边框颜色">边框的宽度不能为0，否则bordercolor属性值无意义。
bordercolor值可以是一个已命名的颜色，也可以是一个十六进制的颜色值。
内框宽度cellspacing
语法为：<table cellspacing="内框宽度值">表格的内框宽度属性cellspacing用于设置表格内部每个单元格之间的间距。
内框宽度的单位是像素。
表格内文字与边框间距cellpadding
语法为：<table cellpadding="文字与边距距离值">在默认情况下，单元格内的内容会紧贴着表格的边框，可以使用cellpadding来设置单元格边框与单元格里的内容之间的距离。
单元格的内容与边框的距离以像素为单位。
表格背景
表格背景颜色bgcolor
语法为：<table bgcolor="背景颜色">表格的背景颜色属性bgcolor是针对整个表格的，bgcolor定义的颜色可以被行、列或单元格定义的背景颜色所覆盖。
表格背景图像
语法为：<table background="背景图像地址">背景图像地址可以为相对地址，也可以为绝对地址。
表格的行属性
高度控制height
语法为：<tr height="行的高度">边框颜色bordercolor
语法为：<tr bordercolor="边框的颜色">行背景bgcolor、background
语法为：<tr bgcolor="行的背景颜色">默认设置为透明色，即和文档背景颜色相同。
bgcolor可以为颜色名或16进制等命名方法。
background可以选择图像的相对地址，也可以选择绝对地址。
行的bgcolor和background属性仅作用于当前行，这里设置的bgcolor颜色可以覆盖<table>的bgcolor和background属性，不过会被单元格定义的背景颜色所覆盖。
行文字的水平对齐方式align
语法为：<tr align="水平对齐方式">align可以取值为：left、center、right。
行文字的垂直对齐方式valign
语法为：<tr valign="垂直对齐方式"><tr>的valign属性用来控制表格当前行的垂直对齐方式。垂直对齐方式有三种，分别是top（文字顶部对齐）、middle（文字居中对齐）和bottom（文字底部对齐）。
单元格属性
单元格大小width、height
语法为：<td width="单元格宽度" height="单元格高度">默认情况下，单元格的宽度和高度会根据内容自动调整，也可以通过width和height设置单元格的宽度和高度。
单元格高度和宽度的单位是像素。
水平跨度colspan
语法为：<td colspan="跨度的列数">在设计表格时，有时候需要将两个或更多的相邻单元格组合成一个单元格。
垂直跨度rowspan
语法为：<td rowspan="跨度的行数">单元格除了可以在水平方向上跨列，还可在垂直方向上跨行。
对齐方式align、valign
语法为：<td align="水平对齐方式" valign="垂直对齐方式">单元格的对齐方式设置与行的对齐方式设置方法相似。
水平对齐方式的取值可以是left、center或right。垂直对齐方式的取值可以是top、middle或bottom。
单元格的背景色
语法为：<td bgcolor="单元格的背景颜色">单元格的边框颜色bordercolor
语法为：<td bordercolor="边框颜色">单元格的亮边框bordercolorlight
语法为：<td bordercolorlight="亮边框的颜色">
单元格的暗边框bordercolordark
语法为：<td bordercolordark="暗边框的颜色">
单元格的背景图像background
语法为：<td background="背景图像的地址">背景图像的地址可以是绝对地址，也可以是相对地址。
表格的结构
表格的表首标记<thead>
语法为：<thead bgcolor="背景颜色" align="对齐方式">
...
</thead>
用于定义表格最上端表首的样式，可以设置背景颜色、文字对齐方式、文字的垂直对齐方式等。
在该语法中，bgcolor、align、valign的取值范围与单元格中的设置方法相同。在<thead>标记内还可以包含<td><th>和<tr>标记，而一个表元素中只能有一个<thead>标记。
表格的表主体标记<tbody>
语法为：<tbody bgcolor="背景颜色" align="对齐方式">
...
</tbody>
用于统一设计表主体部分的样式。
在该语法中，bgcolor、align、valign的取值范围与<thead>中的相同。一个表元素中只能有一个<tbody>标记。
表格的表尾标记<tfoot>
语法为：<tfoot bgcolor="背景颜色" align="对齐方式">
...
</tfoot>
用于定义表尾样式。
在该语法中，bgcolor、align、valign的取值范围与<thead>中的相同。一个表元素中只能有一个<tfoot>标记。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- html 表格小demo 1
- html 表格小demo
- HTML学习-网页主体标记body(二)
- HTML学习-网页主体标记body(一)
- 用XPath查找HTML节点或元素
- XHTML表单
- 2.一些常见的html标签学习
- html.ex.day02
- html.ex.day01
- 写html文件一定要养成好习惯
- outerHTML
- html,图片上传预览，input file获取文件等相关操作
- 如何用photoshop输出html网页
- HTML文件编码
- 如何将一个HTML页面嵌套在另一个页面中
- HTML 水平对齐方式总结
- 制作一个可拖动的html对话框
- HTMLUnit进行模拟浏览器抓取优劣
- MarkdownPad 2 在win10下html渲染错误This view has crashed
- 给select增加placeholder技巧