1.制作普通表格
表格属于结构型标签，使用<table>标签,一个最简单的完整表格需要具备表头、行、列的信息
a.以行为表头的表格
<table>
<tr>
<th>头1</th>
<th>头2</th>
</tr>
<tr>
<td>1,1</td>
<td>1,2</td>
</tr>
<tr>
<td>2,1</td>
<td>2,2</td>
</tr>
</table>
其中<table>标签封装了一个表格,<tr>用来定义行，上述代码中一共定义了三行，即有3组<tr>...</tr>标签,
<th>表示表头单元格,<td>表示每个单元格（不仅每一行都要描述清楚，而且每个单元格都要逐一定义）
如果没有表头,<th>可以省略，IE浏览器会默认隐藏空单元格，<td></td>如果中间没有内容，常习惯性的加一个空格占位( )
b.以列为表头的表格
<table>
<tr>
<th>头1</th>
<td>格1</td>
</tr>
<th>头1</th>
<td>格2</td>
<tr>
<th>头1</th>
<td>格2</td>
</tr>
</table>
3.行列均有表头
<table>
<tr>
<th>头1</th>
<th>头2</th>
<th>头3</th>
</tr>
<tr>
<th>头3</th>
<td>1,1</td>
<td>1,2</td>
</tr>
<tr>
<th>头4</th>
<td>2,1</td>
<td>2,2</td>
</tr>
</table>
2.表格基本属性(注意表格中的内容会自动影响到单元格的大小分配)
a.行高height(默认情况下空白表格的单元格是平均分配的，所以如果需要自定义行高，要事先设定表格的总高度)
可使用CSS样式表先定义table,再定义th或tr
<style type="text/css">
table{
height:185px;
}
table th{
height:32px;
}
</style>
由于此处表格只有一个表头所以可以定义样式表为table th{},如果要定义普通行<tr>,那么应选择其他定义方式，如可定义为 #tr1{}, 其中通过<tr id="tr1">绑定到对象
b.宽度width(不同于行高的是，表格中的宽度是针对于整个表格或每个单元格的)
以下代码并不会改变表格的宽度，表格中一行有多个单元格，浏览器无法辨认代码指定的具体是哪个单元格（而这行不管有多 少个单元格它们的行高始终是相同的）
table{ width:400px;}
table th{ width:100px;}
常用下面的方法修改单元格的宽度
<body>
<table height="168" width="150" border="1"> <!--定义的是整个表格的高度和宽度-->
<tr>
<th width="144" height="80">Head1</th> <!--定义第一列的宽度，之后几列貌似也改为相同宽度-->
<th width="240">Head2</th>
</tr>
<tr>
<td>row 1,cell 1</td>
<td>row 1,cell 2</td>
</tr>
<tr>
<td>row 2,cell 1</td>
<td>row 2,cell 2</td>
</tr>
</table>
</body> 貌似修改一个单元格的宽度就会修改整列的宽度，修改一个单元格的高度就会改变整行的高度，设定了整个表格的宽度、高度 后，再对某行某列的宽高改动时会影响其他行列
修改行高时使用了HTML页面选择器，修改宽度时选择使用了页面内修改表格的属性，后者更适合使用
c.合并单元格
合并同行单元格使用colsplan属性，合并同列单元格使用rowspan属性
d.表格标题
使用<caption>标签给表格添加标题，该标签放在<table>标签中
默认情况下添加的标题在表格桑芳居中的位置，会根据不同的表格的宽度来改变位置
e.拆分表格（为了便于将表格定位给CSS样式表有时不希望代码中一直都是<tr>标签，可以使用<thead>、<tfoot>、<tbody>来拆 分表格）
<thead>定义了表格的首行，<tfoot>定义了表哥的尾行，其中如果使用了一个那么全部元素都要用上，且出现次序是<thead>、 <tfoot>、<tbody>, 其中<tbody>可以出现多次，其余两个只能使用一次
还用这种写法的优点:如果制作某表格的长度超出一页，当打印表格时表格的表头和页脚会被打印在包含表格数据的每张页面上
<table>
<thead>
<tr>
<td>thead</td>
<td>thead</td>
</tr>
</thead>
<tfoot>
<tr>
<td>tfoot</td>
<td>tfoot</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>tbody</td>
<td>tbody</td>
</tr>
</tbody>
</table>
练习
<html>
<head>
<title>表格</title>
<style type="text/css">
table thead{
text-align:center;
color:Yellow;
background-color:Green;
}
table tbody{
text-align:center;
color:Orange;
background-color:Green;
}
table tfoot{
text-align:center;
color:Green;
background-color:Red;
}
</style>
</head>
<body>
<table height="400" width="300">
<thead>
<tr>
<td height="100" width="120">thead</td>
<td>thead</td>
</tr>
</thead>
<tfoot>
<tr>
<td height="100" width="120">tfoot</td>
<td>tfoot</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>tbody</td>
<td>tbody</td>
</tr>
</tbody>
</table>
</body>
</html>f.设置表格的列
可以使用<colgroup>定义表格列的分组，常和<col>标签和<span>标签配合使用
<col>标签为表格中一个或多个列定义属性值，是仅包含属性的空元素，只能在表格或<colgroup>中使用此元素
<html>
<head>
<title>表格</title>
<style type="text/css">
table{
height:185px;
border:1px;
}
.one{
background:Yellow;
text-align:center;
}
.two{
background:Green;
text-align:center;
}
.three{
background:Red;
text-align:center;
}
</style>
</head>
<body>
<table>
<caption>我的表格</caption>
<colgroup class="one"></colgroup>
<colgroup>
<col class="two"></col>
<col class="three"></col>
</colgroup>
<tr>
<th>thead</th>
<th>thead</th>
<th>thead</th>
</tr>
<tr>
<td>tfoot</td>
<td>tfoot</td>
<td>tfoot</td>
</tr>
<tr>
<td>tbody</td>
<td>tbody</td>
<td>tbody</td>
</tr>
</table>
</body>
</html> 貌似每一列是一个组，按顺序定义，上述定义的表中有三列，定义了三组，如果定义两组，则只会对前两列做修改
下面的代码中span="2"表示前2列而非第二列，此时会将表格前两列的背景变为黄色
<html>
<head>
<title>表格</title>
<style type="text/css">
table{
height:185px;
border:1px;
}
.one{
background:Yellow;
text-align:center;
}
</style>
</head>
<body>
<table>
<caption>我的表格</caption>
<colgroup span="2" class="one"></colgroup>
<tr>
<th>thead</th>
<th>thead</th>
<th>thead</th>
</tr>
<tr>
<td>tfoot</td>
<td>tfoot</td>
<td>tfoot</td>
</tr>
<tr>
<td>tbody</td>
<td>tbody</td>
<td>tbody</td>
</tr>
</table>
</body>
</html>3.修饰单元格
a.使用CSS修饰单元格的边框
修改边框可以使用border属性，可以修改边框的粗细，也可以改变边框的颜色和样式，默认情况下边框的值是0(即没有边框),
边框颜色和文本颜色默认情况下是相同的，标准边框定义的样式表可以写为:
border:2px solid red(表示边框的宽度为2px，红色实体的线)
<html>
<head>
<title>表格</title>
<style type="text/css">
.solid{
border:3px solid Red; <!--实线边框-->
}
.dotted{
border:3px dotted Yellow; <!----点状边框>
}
.dashed{
border:3px dashed Green; <!--断断续续的边框 -->
}
.groove{
border:3px groove Gray; <!--外阴影的边框 -->
}
.double{
border:3px double Green; <!--双线的边框 -->
}
</style>
</head>
<body>
<table width="462" height="242" border="2">
<caption>我的表格</caption>
<tr>
<th class="dotted">dotted</th>
<th class="dashed">dashed</th>
</tr>
<tr>
<td class="solid">1,1</td>
<td>1,2</td>
</tr>
<tr>
<td class="groove">groove</td>
<td class="double">double</td>
</tr>
</table>
</body>
</html> 这个例子只列出了5种边框的代码写法，此外还有inset,outset,ridge
此外，设计者还可以分别针对单元格的每一条边进行定义
{border-left:2px dotted;}针对左边的边框，border-top,border-right,border-bottom分别表示单元格的上边、右边和底边
b.合并单元格（<table>标签制定的表格会在所有单元格之外再加上一个四边形，而每个单元格独立存在，所以单元格和单元格之 间总像是有一条缝隙）
{border-collapse:collapse;}若将它运用到表格中可以消除这条缝隙
<html>
<head>
<title>表格</title>
<style type="text/css">
table.one{
border-collapse:collapse;
}
</style>
</head>
<body>
<table width="462" height="242" border="2" class="one">
<caption>我的表格</caption>
<tr>
<th>头1</th>
<th>头2</th>
</tr>
<tr>
<td>1,1</td>
<td>1,2</td>
</tr>
<tr>
<td>2,1</td>
<td>2,2</td>
</tr>
</table>
</body>
</html> 这样单元格与单元格之间的缝隙就消失了，{border-collapse:separate;}表示单元格之间的分离
4.编辑表格中的内容
a.单元格中文本与单元格大小
单元格中文本会随格内文本的长度自动缩放，虽然可以通过数值固定单元格的大小，但如果文本长度超多所设置的单元格长度
那么依然会根据文本的长度来做决定,使用table-layout属性可以限制单元格随文本长度的变化
有些浏览器不能很好地支持table-latout属性，使用时要留心
{table-layout:fixed;}
<html>
<head>
<title>表格</title>
<style type="text/css">
table.one{
border-collapse:collapse;
table-layout:fixed;
}
</style>
</head>
<body>
<table width="300" height="250" border="2" class="one">
<caption>我的表格</caption>
<tr>
<th>头1</th>
<th>头2</th>
</tr>
<tr>
<td>1,1</td>
<td>1,2</td>
</tr>
<tr>
<td>粉刷匠粉刷匠粉刷匠粉刷匠粉刷匠粉刷匠粉刷匠</td>
<td>粉刷匠粉刷匠粉刷匠</td>
</tr>
</table>
</body>
</html>b.修饰单元格中的内容
通过CSS定义单元格中的文本时，可以专门地指定给某一行、某一列或整个表格改变文本颜色、背景等
td{
text-align:center;
font:7em 幼圆;
color:Red;
background-color:Green;
}
<html>
<head>
<title>表格</title>
<style type="text/css">
table.one{
border-collapse:collapse;
table-layout:fixed;
}
table .td1{ <!--注意此处table后有空格-->
text-align:center;
color:Red;
background-color:Green;
}
table th{
text-align:center;
color:Yellow;
background-color:Green;
}
</style>
</head>
<body>
<table width="300" height="250" border="2" class="one">
<caption>我的表格</caption>
<tr>
<th>头1</th>
<th>头2</th>
</tr>
<tr>
<td>1,1</td>
<td>1,2</td>
</tr>
<tr>
<td class="td1">粉刷匠粉刷匠粉刷匠粉刷匠粉刷匠粉刷匠粉刷匠</td>
<td>粉刷匠粉刷匠粉刷匠</td>
</tr>
</table>
</body>
</html> 貌似table{
background-image:url("file:///C|/Users/NIIT/Desktop/图片/background1.jpg");
} 这样子还可以给表格设置背景
修饰表格的一些属性（可放入样式表中）
1.border 所有四个边的属性放在一个声明中
2.border-style 设置元素所有边框的样式,或单独地为各边设置样式
3.border-color 设置边框中可见部分的颜色,或为4个边分别设置颜色
4.border-width 为元素所有边框设置宽度，或单独为各边设置宽度
5.border-bottom 针对于下边框所有属性设置到一个声明中
6.border-bottom-color 设置元素下边框颜色
7.border-bottom-style 设置元素下边框样式
8.border-bottom-width 设置元素下边框宽度
9.border-bottom-color 设置元素下边框颜色
10.border-bottom-color 设置元素下边框颜色
从5-10可相应对上、左、右边框设置(top,left,right)
11.border-collapse 设置是否把表格边框合并为单一的边框
12.border-spacing 设置分隔单元格边框的距离
13.caption-size 设置表格标题的位置
14.empty-cells 设置是否显示表格中的空单元格
15.table-layout 设置显示单元、行和列的算法