概述：表格是网页制作中使用最多的工具之一，在制作网页时，使用表格可以更清晰的排列数据。但实际制作过程中，表格更多的用在网页布局定位上，很多网页都以表格布局的，这是因为表格在文本和图像的位置控制方面都有很强的功能。
1.创建表格
（1）表格的基本构成 tabel、tr、td
概述：表格由行、列和单元格3部分组成，一般通过3个标记来创建，分别是表格标记tabel、行标记tr和单元格标记td。表格的各种属性都要在表格的开始标记 <table>和表格的结束标记</table>之间才有效。
行：表格中的水平间隔
列：表格中的垂直间隔
单元格：表格中行与列相交所产生的区域
语法：
<table border = 1>
<tr>
<td>第1行第1列单元格</td>
<td>第1行第2列单元格</td>
</tr>
<tr>
<td>第2行第1列单元格</td>
<td>第2行第2列单元格</td>
</tr>
(2)设置表格的标题
概述：可以使用<caption>来设置标题单元格，表格的标题一般位于整个表格的第1行。一个<table>表格只能含有一个表格标题
语法：<table width = "171" border = "1">
<caption>考试成绩</caption>
<tr>
<td>....</td>
</tr>
提示：使用<caption>标记创建表格标题的好处是标题定义包含在表格内。如果表格移动或在HTML文件中重定位，标题会随着表格相应的移动
（3）表头 th
概述：表格的表头<th>是<td>单元格的一种变体，实际上仍是一种单元格。他一般位于第一行和第一列，用来表明这一行或这一列的内容列别。在一般情况 下，浏览器会以粗体和居中的样式显示<th>元素中的内容。
语法：<table border = "1">
<caption>考试成绩表</caption>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>副科</th>
<tr>
<td>张三</td>
<td> 89</td>
<td>90</td>
<td>79</td>
</tr>
2.表格的基本属性
（1）表格的宽度width
语法：<table width = "表格宽度">
（2）表格的高度height
语法：<tabel height = "表格高度">
表格的宽高可以是像素值也可以是百分比
（3）表格的对齐方式
语法：<table align = "对齐方式">
提示：虽然整个表格在浏览器页面范围内居中对齐，但是表格里单元格的对齐方式并不会因此而改变。如果要改变单元格的对齐方式，就需要在行、列或单元 格内另行定义
3.表格的边框
（1）表格边框宽度border
语法：<table border = "边框宽度">
提示：border属性设置的表格边框只能影响表格四周的边框宽度，而并不能影响单元格之间边框尺寸。虽然设置边框宽度没有限制，但是一般边框设置不应超过5像素，过于宽 大的边框会影响表格的整体美观
（2）表格边框颜色bordercolor
语法：<table border = "边框宽度" bordercolor ＝ “边框颜色”>
说明：边框颜色为16进制的颜色值
（3）内框宽度cellspacing
概述：表格的内框宽度属性cellspacing用于设置表格内部每个单元格之间的间距
语法：<table cellspacing = "内框宽度值">
（4）表格内文字与边框间距cellpadding
概述：在默认情况下，单元格里的内容会紧贴表格的边框，这样看上去非常拥挤，可以使用cellpadding来设置单元格边框与单元格里的内容之间的距离
语法：<table cellpadding = "文字与边框距离值">
4。表格背景
（1）表格的背景颜色
概述：表格的背景颜色bgcolor是针对整个表格的，bgcolor定义的颜色可以被行、列或单元格定义的背景颜色覆盖
语法：<table bgcolor = "#FFCCFF">
(2)表格背景图像
语法：<table background = "背景图像地址">
说明：背景图像的地址可以是相对地址，也可以是绝对地址
5.表格的行属性
概述：不仅可以对表格整体设置相关属性，还可以对单独的一行单元格设置相关属性
（1）高度控制height
语法：<tr height = "行的高度">
（2）边框颜色bordercolor
语法：<tr bordercolor = "边框颜色">
（3）行背景bicolor、background
语法：<tr bgcolor = "行的背景颜色">
说明：默认为透明，bgcolor可以为颜色名或16进制，background可以选择图像的相对地址，也可以选择绝对地址
（4）行文字的水平对齐方式align
概述：<tr>的align属性用来控制表格当前行的水平对齐方式，他不受表格整体对齐方式的影响，却能够被单元格的对齐方式定义所覆盖
语法：<tr align = "水平对齐方式">
（5）行文字的垂直对齐方式valign
概述：<tr>的valign属性用来控制表格当前行的垂直对齐方式，垂直对齐方式有3种，top、middle、bottom。
语法：<tr valign = "垂直对齐方式">
6.单元格属性
概述：单元格是表格中最基本的单位。<td>单元格全部包含在行<tr>中，一个行里可以有任意多个单元格，可以自定义设置单元格的各项属性，这些样式将覆盖 <table>和<tr>已经定义的样式。
（1）单元格大小width、height
概述：默认情况下，单元格的高度和宽度会根据内容自动调整，也可以通过width、height设置。
语法：<td width = "单元格宽度" height ＝ “单元格高度”>
说明：单位是像素
（2）水平跨度colspan
概述：在设计表格时，有时需要将俩个或更多的相邻单元格组合成一个单元格
语法：<td colspan = "跨度的列数">
（3）垂直跨度
语法：<td rowspan = "跨度的行数">
提示：行或列跨越在内容不能完全放于一个单元格内时非常有用，通过跨越多个单元格，不需要改变表格就能将更多的文字放入单元格
（4）对齐方式align valign
语法：<td align ＝ “ 水平对齐方式” align ＝ “垂直对齐方式”>
（5）单元格的背景色
语法：<td bgcolor =“背景颜色">
（6）单元格的边框颜色
语法：<td bordercolor = "边框颜色">
（7）单元格的亮边框bordercolorlight
概述：单元格的亮边框就是单元格边框向光的部分
语法：<td bordercolorlight = "亮边框颜色">
（8）单元格的暗边框颜色
语法：<td bordercolordark = “暗边框颜色”>
（9) 单元格的背景图像background
语法：<td background = "背景图像地址">
7.表格的结构
概述：还有一些标记是用来表示表格结构的，包括表首标记<thead>、表主体标记<body>以及表尾标记<tfoot>。这些通过成对出现的标记设置，应用到表格里用于 整体规划表格的行列属性。使用这些标记能对表格的一行或多行单元格属性进行统一修改，从而省去了逐一修改单元格属性的麻烦。
（1）表格的表首标记<thead>
(2)表格的表主体标记<tbody>
(3)表格的表尾标记<tfoot>
概述：用于定义表格最上端表首的样式，可以设置颜色、对齐方式等
语法：
<table width = "400" border = "1" cellpadding = "5" cellspacing = "2">
<caption>
购物网站列表
</caption>
<thead bgcolof = "背景颜色" align = "对齐方式">
<tr>
<td>产品名称</td>
<td>类型</td>
<td>价格</td>
</tr>
</thead>
<tbody bgcolor = "#cc99ff" align = "left">
<tr>
<td>手工编辑围巾</td>
<td>围巾</td>
<td>45.00元</td>
</tr>
</tbody>
<tfoot bgcolor = "#FFDDFF" align = "right">
<tr>
<td colspan = "3" align = "left">欢迎光临</td>
</tr>
</tfoot>
98
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
