一、创建表格
1、表格的基本构成： Table， Tr,td
1）简介：
表格是由行列和单元格三部分组成的，一般通过三个标记来创建：
Table，表格标记
Tr,行标记
td，单元格标记
2）语法：
<table>
<tr><!--第1行-->
<td> 单元格文字</td><!--第1列-->
<td> 单元格文字</td><!--第2列--></tr>
<tr><!--第2行-->
<td> 单元格文字</td><!--第1列-->
<td> 单元格文字</td><!--第2列--></tr>
</table>
3）实例：简单的课表
html
<table>课表
<tr><!--第1行-->
<td> \</td><!--第1列-->
<td> Monday</td><!--第2列-->
<td> Tuesday</td><!--第3列-->
<td> Wednesday</td>
<td> Thursday</td>
<td> Friday</td>
<td> Saturday</td>
<td> Sunday</td>
</tr>
<tr><td>第1节</td></tr>
<tr><td>第2节</td></tr>
<tr><td>第3节</td></tr>
<tr><td>第4节</td></tr>
<tr><td>第5节</td></tr>
<tr><td>第6节</td></tr>
</table>4）结果演示：
2、设置表格的标题caption
TIPS:使用caption标记表格标题的好处是，标题定义包含在表格内，表格移动会同时移动
<caption>表格标题</caption>
html
<table>
<caption>课程表</caption>
<tr><!--第1行-->
<td> \</td><!--第1列-->
<td> Monday</td><!--第2列-->
<td> Tuesday</td><!--第3列-->
<td> Wednesday</td>
<td> Thursday</td>
<td> Friday</td>
<td> Saturday</td>
<td> Sunday</td>
</tr>
<tr><td>第1节</td></tr>
<tr><td>第2节</td></tr>
<tr><td>第3节</td></tr>
<tr><td>第4节</td></tr>
<tr><td>第5节</td></tr>
<tr><td>第6节</td></tr>
</table>
3、表头th
1）简介：表头TH是TD单元格的一种变体,实质上仍是一种单元格,它一般位于第1行和第一列用来表明这一行或列的内容类别.一般情况下浏览器会以粗体和居中的样式显示th元素中的内容
2）语法：
<th>表头的内容</th>
3）实例：简单的课表
html
<table>
<caption>课程表</caption>
<tr><!--第1行-->
<th> \</th><!--第1列-->
<td> Monday</td><!--第2列-->
<td> Tuesday</td><!--第3列-->
<td> Wednesday</td>
<td> Thursday</td>
<td> Friday</td>
<td> Saturday</td>
<td> Sunday</td>
</tr>
<tr><th>第1节</th></tr>
<tr><th>第2节</th></tr>
<tr><th>第3节</th></tr>
<tr><th>第4节</th></tr>
<tr><th>第5节</th></tr>
<tr><th>第6节</th></tr>
</table>4）结果演示：
二、表格的基本属性
1、表格宽度 Width
<table width="表格的宽度">
2、表格高度 Height
<table height="表格的高度">
3、表格对齐方式align
<table align="对齐方式">
html
<table width="500" height="130" align="center">
三、表格的边框
1、表格边框宽度 Border
Border属性设置的边框只能影响表格四周的边框宽度，一般设置不应超过五像素，否则会影响整体美观
<table border="边框宽度">
html
<table width="600" height="130" align="center" border="5">
2、表格边框颜色bordercolor
Tips:边框颜色默认为灰色,边框的宽度不能为零否则无法显示颜色
<table **border="5"**bordercolor="#F5B906">
html
<table width="600" height="130" align="center" border="5" bordercolor="#F5B906">
3、内框宽度cellspacing
<table cellspacing="内框宽度值">
4、表格内文字与边框间距 Cellpadding
<table cellpadding="表格内文字与边框间距">
html
<table width="750" height="130" align="center" border="1" bordercolor="#F5B906" cellspacing="5" cellpadding="10">
四、表格背景
1、表格背景颜色bgcolor
<table bgcolor="背景颜色">
2、表格背景图像
这里用绝对路径或者相对路径都可以
<table background="背景图像地址">
五、表格的行属性
1、高度控制height
<tr height="行的高度">
2、边框颜色bordercolor
<tr border color="行的边框颜色"
3、行背景bgcolor, Background
<tr bgcolor="行的颜色">
<tr background="背景图像的路径">
4、行文字的水平对齐方式align
<tr align="对齐方式"
5、行文字的垂直对齐方式valign
<tr valign="对齐方式">
"表格行属性整体演示代码"
html
<table width="750"
height="130"
align="center"
border="5"
bordercolor="#F5B906"
cellspacing="5"
cellpadding="10"
background="02.png">
<!--width:表格总宽度,
Height:表格总高度,
Align:表格的排列方式;
border:表格外边框;
Border color:表格边框颜色;
Sellspacing:内框宽度;
cellpadding:表格内文字与边框间距-->
<caption>课程表</caption>
<tr height="60" bordercolor="##000000" bgcolor="#BA0535" align="center" valign="top"><!--第1行-->
<th width="46"> \</th><!--第1列-->
<td width="51"> Monday</td><!--第2列-->
<td width="55"> Tuesday</td><!--第3列-->
<td width="76"> Wednesday</td>
<td width="60"> Thursday</td>
<td width="44"> Friday</td>
<td width="57"> Saturday</td>
<td width="51"> Sunday</td>
</tr>
<tr background="01.jpg"><th>第1节</th><td>语文</td></tr>
<tr><th>第2节</th></tr>
<tr><th>第3节</th></tr>
<tr><th>第4节</th></tr>
<tr><th>第5节</th></tr>
<tr><th>第6节</th></tr>
</table>演示结果：
六、单元格属性
1、单元格大小 Width, Height
默认情况下单元格的宽度和高度会根据内容自动调整
<td height="高度" width="宽度">内容</td>
2、水平跨度 Colspan
<td colspan="跨度的列数" >内容</td>
3、垂直跨度 Rowspan
<td rowspan="跨度的行数" >内容</td>
4、对齐方式 Align,valign
<td align="对齐方式">
<td valign="对齐方式">
5、单元格的背景色
<td bgcolor="颜色">
6、单元格的边框颜色Bordercolor
<td bordercolor="边框颜色">
7、单元格的亮边框Bordercolorlight
<td bordercolorlight="单元格边框向光部分的颜色">
8、单元格的暗边框Bordercolordark
<td bordercolordark="单元格边框背光部分的颜色">
9、单元格的背景图像 Background
<td background="图片路径">
单元格属性整体演示代码:
html
<table border="5">
<caption>商品销售清单</caption>
<tr>
<th height="30" width="40">序号</th>
<th width="60">产品</th>
<th width="60">成本</th>
<th width="60">价格</th>
<th width="130" bordercolor="#FC0105">垂直合并演示</th></tr>
<tr>
<th>1</th>
<td bordercolorlight="#E91EDA">电视</td>
<td>$3000</td>
<td>$4000</td>
<td rowspan="4" align="center" valign="bottom" bgcolor="#F1B5B6">这里是纵向合并</td>
</tr>
<tr>
<th>2</th>
<td bordercolordark="#E91EDA">电脑</td>
<td>$4000</td>
<td>$5000</td></tr>
<tr>
<th>3</th>
<td>电话</td>
<td>$5000</td>
<td>$6000</td></tr>
<tr>
<th colspan="2" align="center" background="01.jpg">合计</th>
<td>$1200</td>
<td>$1500</td></tr>
</table>演示结果：
七、表格的结构
下面会通过每日饮品特价表，来展示表首，表主体和表尾的使用，效果如下：
1、表格的标首标记<thead>
1）简介：表首样式的开始是<thead>结束</thead>他们用于定义表最上端表首的样式，可以设置背景颜色，文字对齐方式文字的垂直对齐方式等
<thead bgcolor="背景颜色" align="文字水平对齐方式" valign="文字垂直对齐方式" >
......
</thead>
2、表格的表主体标记<tbody>
1）简介：表主体样式用于统一设计表主体部分的样式
<tbody bgcolor="背景颜色" align="文字水平对齐方式" valign="文字垂直对齐方式" >
......
</tbody>
3、表格的表尾标记<tfoot>
1）简介：表尾标记用于定义表尾样式
<tfoot bgcolor="背景颜色" align="文字水平对齐方式" valign="文字垂直对齐方式" >
......
</tfoot>
《每日饮品特价》演示代码：
html
<table border="5">
<caption>每日饮品特价</caption>
<thead bgcolor="#D691F3" align="center" valign="middle" >
<tr><th >时间</th><th width="96">特价饮品</th></tr></thead>
<tbody bgcolor="#F5D7F2" align="center">
<tr><td> Monday</td><td>咖啡</td></tr>
<tr><td> Tuesday</td><td>奶茶</td></tr>
<tr><td> Wednesday</td><td>柠檬红茶</td></tr>
<tr><td> Thursday</td><td>柠檬绿茶</td></tr>
<tr><td> Friday</td><td>橙汁</td></tr>
<tr><td> Saturday</td><td>百香果蜜</td></tr>
</tbody>
<tfoot bgcolor="#D691F3">
<tr><td colspan="2"> 周日休息，welcome during weekdays</td></tr>
</tfoot>
</table>