用于呈现逻辑上并列的具有相关性的数据内容.
<ul>
<li></li>
</ul>
disc: 实心圆点
circle: 空心圆圈
square: 实心正方形
<ol>
<li></li>
</ol>
1: 阿拉伯数字
i: 小写罗马数字
I: 大写罗马数字
A: 大写字母
a: 小写字母
适用呈现包含主题及描述的数据内容.
<dl>
<dt>主题</dt>
<dd>描述</dd>
</dl>
表格
<table>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
thead: 表头
tbody: 表体
tfoot: 表脚
th: 专用于表头中的单元格, 其具有自动加粗并且居中的效果.
表格的属性控制:
border: 边框
bordercolor: 边框颜色
width: 宽度
height: 高度
cellspacing: 单元格间距(外)
cellpadding: 单元格填充(内)
align: 表格的位置控制
单元格的属性控制:
align
valign
如何合并单元格/跨行或跨列?
<td rowspan="number" colspan="number">
注意: 合并后, 会引发单元格数量的减少!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>我的电脑文件列表</h1>
<ul>
<li>我的电脑
<ul>
<li>本地磁盘(C:)
<ul>
<li>我的文档</li>
<li>我的收藏</li>
</ul>
</li>
<li>本地磁盘(D:)
<ul>
<li>我的游戏</li>
<li>我的资料</li>
<li>我的电影</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
格语法:
注意:颜色使用格式有三种:rgb(x,x,x) #xxxxxx colorname
<table width=""></table>指定表格的宽度大小(使用数字pixel或%)
<table border=""></table>设定表格边框大小(使用数字pixel)
<table align=""></table>表格位置,置左,为默认值
align属性:left(左对齐表格,默认值)、right(右对齐表格)、center(居中对齐表格)
<table bgcolor=""></table>设定表格的背景颜色
<table cellpadding=""></table>指定内容与网格线之间的间距(使用数字pixel或%)
<table cellspacing=""></table>指定网格线与网格线之间的距离(使用数字pixel或%)
<table border="1" cellspacing="0" cellpadding="0">
通常表格, 这两个参数都设置为 0 。
<table rules="rows"></table>规定内侧边框的哪个部分是可见的。(兼容性差)
rules属性:none 没有线条。
groups 位于行组和列组之间的线条。
rows 位于行之间的线条。
cols 位于列之间的线条。
all 位于行和列之间的线条。
<table summary="Monthly savings for the Flintstones family"></table>
定义了表格内容的摘要:
表格结构:
在使用表格进行布局时, 可以将表格划分为头部、主体和页脚, 具体如下所示:
<thead></thead>:用于定义表格的头部, 必须位于<table></table>标记中, 一般包含网页的logo和导航等头部信息。
<tfoot></tfoot>:用于定义表格的页脚, 位于<table></table>标记中<thead></thead>标记之后, 一般包含网页底部的企业信息等。
<tbody></tbody>:用于定义表格的主体, 位于<table></table>标记中<tfoot></tfoot>标记之后, 一般包含网页中除头部和底部之外的其他内容。
注意:在没有<tbody></tbody>比较的情况下, 浏览器会自动添加<tbody></tbody>标记。
<table bordercolor=""></table>设定表格边框的颜色
<table cols=""></table>指定表格的栏数
<table height=""></table>指定表格的高度大小(使用数字)
<table background=""></table>背景图片的URL=就是路径网址(默认是repeat:水平和垂直方向重复)
<table bordercolordark=""></table>设定表格暗边框的颜色
<table bordercolorlight=""></table>设定表格亮边框的颜色
<tr align=""></tr> 定义表格行的内容对齐方式。
align属性值:right、left、center、justify、char
<tr bgcolor=""></tr> 规定表格行的背景颜色。
<tr valign=""></tr> 规定表格行中内容的垂直对齐方式。
valign属性值right、left、center、justify、char
<td colspan=""></td>指定储存格合并栏的栏数(使用数字)
<td rowspan=""></td>指定储存格合并列的列数(使用数字)
<td align=""></td> 调整表格字段之左右对齐
<td bgcolor=""></td> 设定表格字段之背景颜色
<td colspan="" rowspan=""></td> 表格字段的合并
<td valign=""></td> 调整表格字段之上下对齐
<td width=""></td> 调整表格字段宽度
<td nowrap="nowrap"></td> 规定表格单元格中的内容不换行(注意只有一个值:nowrap)
<caption></caption>为表格加上标题
<caption align="">设定表格标题位置
align属性:left, center(默认值), right
<th></th> 定义表头(粗体居中)
细表格边框
<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="158" height="68">
<tr>
<td width="158" height="68"></td>
</tr>
</table>
表格创建后浏览器会自动添加<tbody>标签
TML中的表格是由<table>标签进行定义的,表格在HTML中的表现形式与使用方法与word中的表格非常类似。多数情况使用Dreamweaver的可视化视图只做表格更为简单、方便。本文主要讲述如何使用代码来编写表格,让大家掌握表格的代码书写格式与其对应的属性。
表格的标签组成
HTML中的表格是由<table>为主体标签,浏览器会将该标签解释为一个表格。表格中的行使用<tr>标签进行定义。<tr>标签为<table>标签的子类,设置若干个<tr>标签可以将表格分割为若干个行。<td>标签用于定义表格的列,<td>标签为又是<tr>标签的子类,因此每个行都需要设置相应数量的<td>标签来分割列,形成一个完整的表格。
表格的标签组合关系为:
<table>
<tr>
<td>我是单元格1</td>
<td>我是单元格2</td>
</tr>
</table>
表格中可以插入文本、图片、列表、段落、表单、水平线等任何html标签,甚至可以用来做页面布局。但是table布局存在代码冗余过长、不符合HTML规范、搜索引擎不友好等问题。因此建议大家尽量不要使用table进行页面布局,除非页面中确实需要一张表格。
剩下的<th>、<thead>、<tbody> 和 <tfoot>很少被用到,这是由于浏览器对它们的支持不太好。
表格和边框属性
表格自身可以定义border属性来决定表格边框的宽度,该属性的值默认是以数字单位进行显示,例如border=”1″该值的单位为px。注意,不要在border的数值后面加上任何单位,否该值无法正确识别。
表格的表头
在<table>中可以通过<th>标签设置表头,表头的<th>标签与<tr>标签属于平级,并且表头一般出现在<tr>标签的前面。对于一个表格来说,表头并不是必须的,可以根据需要插入表头。<th>标签内的文字会被自动加粗。
单元格的合并
单元格的合并分为垂直合并与水平合并,在合并时需要确定其他行与列中是否有对应数量的单元格。
水平合并单元格使用colspan属性,其值是用数字的形式确定需要合并的单元格数量,例如colspan=”2″即代表向右合并两个单元格。
垂直合并单元格使用rowspan属性,与水平合并的属性相同,同样也是以数字形式确定需要合并的单元格数量,例如rowspan=”2″代表向下合并两个单元格。
实例演示代码:
<table border=“1”>
<tr>
<th>姓名</th>
<th colspan=“2”>电话</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table><h4>横跨两行的单元格:</h4>
<table border=“1”>
<tr>
<th>姓名</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan=“2”>电话</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
单元格边距
表格具有与padding样式类似的内边距功能。通过在<table>标签内定义cellpadding属性,来为其标签下的所有<td>元素设置内边距。cellpadding属性的参数是值是以数字的形式来确定边距的大小,例如cellpadding=”10″ 则表示table中的所有<tr>标签内边距为10px
单元格间距
单元格的间距是设置<tr>标签的外边距,这个也与css样式中的margin类似,通过在<table>标签内定义cellspacing属性,来为其标签下的所有td元素设置外边距。该属性也是以数字的形式来确定外边距的大小,例如cellspacing=”10″则表示这个table中的所有<tr>标签的外边距为10px
为表格设置背景
表格可以通过background属性为表格或单元格设置任意图片作为背景,其使用方法非常像css中的background。为background设置对应的图片路径,即可使单元格显示相应的图片。例如background=”table_bg.gif”
表格内容的对齐排列
表格的对齐分为水平对齐和垂直对齐。它们分别是align属性与valign属性,将这两个属性插入到对应的<td>标签中即可完成单元格内文本或图像的对齐。
水平对齐align分别有三个值:left左对齐、center水平居中、right右对齐
垂直对齐valign也有三个值:top顶端对齐、middle垂直居中、bottom底部对齐、baseline为基线对齐。
其中基线对齐可能无法从字面上理解,其实基线对齐也就是文本出现在表格的中上部而不是正中央。如果文字不大的话,效果和middle差不多,比middle稍微靠上一点。
私信发送【前端】有惊喜!
*请认真填写需求信息,我们会在24小时内与您取得联系。