表格更多的用在网页布局上，很多网页都是以表格布局的
表格基本构成：行、列、单元格
表格：<table>
行：<tr>
单元格：<td>
行：表格的水平间隔列：表格的垂直间隔单元格：表格的行列相交的区域语法：
<table> <tr> <td>单元格文字</td> <td>单元格文字</td> ... ... </tr> <tr> <td>单元格文字</td> <td>单元格文字</td> ... ... </tr> </table>eg：
<html> <head> <meta charset="UTF-8"> <title>有序列表</title> </head> <body> <table> <tr> <td>(1,1)</td><td>(1,2)</td><td>(1,3)</td> </tr> <tr> <td>(2,1)</td><td>(2,2)</td><td>(2,3)</td> </tr> <tr> <td>(3,1)</td><td>(3,2)</td><td>(3,3)</td> </tr> </table> <hr> <dl><!--定义列表嵌套表格--> <dt>九宫图</dt> <dd> <table> <tr> <td>(4)</td><td>(9)</td><td>(2)</td> </tr> <tr> <td>(3)</td><td>(5)</td><td>(7)</td> </tr> <tr> <td>(8)</td><td>(1)</td><td>(6)</td> </tr> </table> </dd> </dl> </body> </html>运行结果：
可以用<caption>来设置标题单元格，表格的标题一般位于整个表格第一行，一个<table>表格只能含有一个表格标题。
语法： <caption>title</caption>
eg:
<html> <head> <meta charset="UTF-8"> <title>表格标题</title> </head> <body> <table> <caption>考试成绩表</caption> <tr> <td>张三</td><td>80</td><td>90</td><td>99</td> </tr> <tr> <td>李四</td><td>70</td><td>80</td><td>90</td> </tr> <tr> <td>王五</td><td>60</td><td>70</td><td>80</td> </tr> </table> </body> </html>运行结果：
提示：<caption>标记创建表格标题的好处是标题定义包含在表格内，若表格移动或在HTML中重定位，标题会随着表格相应地移动。
表头<th>是单元格<td>的一种变体，实质上仍然是一种单元格。一般用在第一行，第一列，表明这一行或这一列的内容类别。一般情况下，浏览器会以粗体和居中的样式显示<th>元素中的内容
语法：
<table> <tr><!--第一行设置表头--> <th>姓名</th> <th>XXX</th> ... </tr> <tr> <td>XXX</td><td>XXX</td><td>XXX</td> </tr> </table>说明:<th>起始标记必须有，结尾标记可选，也即可有可无
eg:
<html> <head> <meta charset="UTF-8"> <title>表格标题</title> </head> <body> <table> <caption>考试成绩表</caption> <tr> <th>姓名</th><th>C</th><th>java</th><th>c++</th> </tr> <tr> <td>张三</td><td>80</td><td>90</td><td>99</td> </tr> <tr> <td>李四</td><td>70</td><td>80</td><td>90</td> </tr> <tr> <td>王五</td><td>60</td><td>70</td><td>80</td> </tr> </table> <hr> <table> <caption>考试成绩表</caption> <tr> <th>姓名 <!--结尾标记可有可无--> <th>C <th>java <th>c++ </tr> <tr> <td>张三</td><td>80</td><td>90</td><td>99</td> </tr> <tr> <td>李四</td><td>70</td><td>80</td><td>90</td> </tr> <tr> <td>王五</td><td>60</td><td>70</td><td>80</td> </tr> </table> </body> </html>运行结果：
表格的宽度，高度，对齐方式等
可以使用表格width属性设置表格宽度，若不指定宽度，浏览器会根据表格内容的多少自动调整宽度
语法： <table width="表格宽度">
说明：表格宽度值可以是像素值，也可以是百分比
eg:
<html> <head> <meta charset="UTF-8"> <title>表格标题</title> </head> <body> <table width="100%"> <caption>考试成绩表</caption> <tr> <th>姓名</th><th>C</th><th>java</th><th>c++</th> </tr> <tr> <td>张三</td><td>80</td><td>90</td><td>99</td> </tr> <tr> <td>李四</td><td>70</td><td>80</td><td>90</td> </tr> <tr> <td>王五</td><td>60</td><td>70</td><td>80</td> </tr> </table> </body> </html>运行结果:
可以使用表格height属性设置表格高度，若不指定高度，浏览器会根据表格内容的多少自动调整高度
语法： <table height="表格高度">
说明：表格高度值可以是像素值，也可以是百分比
<html> <head> <meta charset="UTF-8"> <title>表格标题</title> </head> <body> <table height="100%"> <caption>考试成绩表</caption> <tr> <th>姓名</th><th>C</th><th>java</th><th>c++</th> </tr> <tr> <td>张三</td><td>80</td><td>90</td><td>99</td> </tr> <tr> <td>李四</td><td>70</td><td>80</td><td>90</td> </tr> <tr> <td>王五</td><td>60</td><td>70</td><td>80</td> </tr> </table> </body> </html>运行结果：
语法：<table align="对齐方式">
说明：
align参数取值 属性值说明left整个表格在浏览器页面左对齐center整个表格在浏览器页面居中对齐right整个表格在浏览器页面右对齐eg:
<html> <head> <meta charset="UTF-8"> <title>表格标题</title> </head> <body> <table height="200" width="200" align="center"> <caption>考试成绩表</caption> <tr> <th>姓名</th><th>C</th><th>java</th><th>c++</th> </tr> <tr> <td>张三</td><td>80</td><td>90</td><td>99</td> </tr> <tr> <td>李四</td><td>70</td><td>80</td><td>90</td> </tr> <tr> <td>王五</td><td>60</td><td>70</td><td>80</td> </tr> </table> </body> </html>运行结果:
border属性来设置表格边框效果，包括边框宽度，颜色
默认情况下不指定border属性，浏览器不显示表格边框
语法：<table border="边框宽度">
eg：
<html> <head> <meta charset="UTF-8"> <title>表格标题</title> </head> <body> <table width="100%" border="5"> <caption>考试成绩表</caption> <tr > <th>姓名</th><th>C</th><th>java</th><th>c++</th> </tr> <tr> <!--行也有对齐属性--> <td>张三</td><td>80</td><td>90</td><td>99</td> </tr> <tr> <td>李四</td><td>70</td><td>80</td><td>90</td> </tr> <tr> <td>王五</td><td>60</td><td>70</td><td>80</td> </tr> </table> </body> </html>运行结果：
说明:border属性设置的边框宽度只能影响表格四周边框宽度，而并不能影响单元格之间边框尺寸。建议边框宽度值不超过5
默认边框颜色黑色，可以用bordercolor来调节
语法：<table border="大于0的宽度" bordercolor="边框颜色">
eg:
<html> <head> <meta charset="UTF-8"> <title>表格标题</title> </head> <body> <table width="100%" border="5" bordercolor="red"> <caption>考试成绩表</caption> <tr > <th>姓名</th><th>C</th><th>java</th><th>c++</th> </tr> <tr> <!--行也有对齐属性--> <td>张三</td><td>80</td><td>90</td><td>99</td> </tr> <tr> <td>李四</td><td>70</td><td>80</td><td>90</td> </tr> <tr> <td>王五</td><td>60</td><td>70</td><td>80</td> </tr> </table> </body> </html>运行结果：
cellspacing用来设计表格内部每个单元格之间的间距
语法：<table cellspacing="内框宽度值">
eg:
<html> <head> <meta charset="UTF-8"> <title>表格标题</title> </head> <body> <table width="100%" border="5" bordercolor="red" cellspacing="10"> <caption>考试成绩表</caption> <tr > <th>姓名</th><th>C</th><th>java</th><th>c++</th> </tr> <tr> <!--行也有对齐属性--> <td>张三</td><td>80</td><td>90</td><td>99</td> </tr> <tr> <td>李四</td><td>70</td><td>80</td><td>90</td> </tr> <tr> <td>王五</td><td>60</td><td>70</td><td>80</td> </tr> </table> </body> </html>运行结果：
默认情况下，单元格里的内容会紧贴着表格边框，这样看上去非常拥挤。可用cellpadding设置单元格边框与单元格里的内容之间的距离。
语法： <table cellpadding="文字与边框距离值">
eg:
<html> <head> <meta charset="UTF-8"> <title>表格标题</title> </head> <body> <table width="100%" border="5" bordercolor="red" cellspacing="10" cellpadding="20"> <caption>考试成绩表</caption> <tr > <th>姓名</th><th>C</th><th>java</th><th>c++</th> </tr> <tr> <!--行也有对齐属性--> <td>张三</td><td>80</td><td>90</td><td>99</td> </tr> <tr> <td>李四</td><td>70</td><td>80</td><td>90</td> </tr> <tr> <td>王五</td><td>60</td><td>70</td><td>80</td> </tr> </table> </body> </html>运行结果：
表格背景颜色和背景图像
表格背景颜色针对整个表格，bgcolor定义的颜色可被行列或单元格定义的背景颜色所覆盖
语法：<table bgcolor="背景颜色">
eg:
<html> <head> <meta charset="UTF-8"> <title>表格标题</title> </head> <body> <table width="100%" border="5" bordercolor="red" cellspacing="10" cellpadding="20" bgcolor="green"> <caption>考试成绩表</caption> <tr > <th>姓名</th><th>C</th><th>java</th><th>c++</th> </tr> <tr> <!--行也有对齐属性--> <td>张三</td><td>80</td><td>90</td><td>99</td> </tr> <tr> <td>李四</td><td>70</td><td>80</td><td>90</td> </tr> <tr> <td>王五</td><td>60</td><td>70</td><td>80</td> </tr> </table> </body> </html>运行结果：
语法：<table background="背景图像地址">
说明：地址可以是相对地址或绝对地址
eg:
<html> <head> <meta charset="UTF-8"> <title>表格标题</title> </head> <body> <table width="100%" border="5" bordercolor="red" cellspacing="10" cellpadding="20" bgcolor="green" background="image/timg.jpeg" background="image/timg.jpeg"> <caption>考试成绩表</caption> <tr > <th>姓名</th><th>C</th><th>java</th><th>c++</th> </tr> <tr> <!--行也有对齐属性--> <td>张三</td><td>80</td><td>90</td><td>99</td> </tr> <tr> <td>李四</td><td>70</td><td>80</td><td>90</td> </tr> <tr> <td>王五</td><td>60</td><td>70</td><td>80</td> </tr> </table> </body> </html>运行结果：
表格行也有自己的属性，用这些属性可以对单独一行进行设计，有：行高，行边框颜色，行里内容的对齐方式
语法：<tr height="本行的高度">
eg:
<html> <head> <meta charset="UTF-8"> <title>表格标题</title> </head> <body> <table width="100%" border="5" bordercolor="red" cellspacing="10" cellpadding="20"> <caption>考试成绩表</caption> <tr > <th>姓名</th><th>C</th><th>java</th><th>c++</th> </tr> <tr> <!--行也有对齐属性--> <td>张三</td><td>80</td><td>90</td><td>99</td> </tr> <tr> <td>李四</td><td>70</td><td>80</td><td>90</td> </tr> <tr> <td>王五</td><td>60</td><td>70</td><td>80</td> </tr> <tr height="200"> <td colspan="4">详细备注:</td> <!--colspan="" 跨列合并单元格 rowspan=“”跨行合并单元格--> </tr> </table> </body> </html>运行结果：
语法： <tr bordercolor="行边框颜色">
eg：
<html> <head> <meta charset="UTF-8"> <title>行边框颜色</title> </head> <body> <table width="100%" border="5" bordercolor="red" cellspacing="10" cellpadding="20"> <caption>考试成绩表</caption> <tr > <th>姓名</th><th>C</th><th>java</th><th>c++</th> </tr> <tr> <!--行也有对齐属性--> <td>张三</td><td>80</td><td>90</td><td>99</td> </tr> <tr> <td>李四</td><td>70</td><td>80</td><td>90</td> </tr> <tr> <td>王五</td><td>60</td><td>70</td><td>80</td> </tr> <tr height="200" border="5" bordercolor="green"> <td colspan="4">详细备注:</td> <!--colspan="" 跨列合并单元格 rowspan=“”跨行合并单元格--> </tr> </table> </body> </html>运行结果：
单独给某一行设置边框颜色，不知为何不起作用了？现在的浏览器似乎不支持了
仅仅作用与当前行，且bgcolor颜色可以覆盖<table>的bgcolor或者background属性,不过若更小一级的单元格<td>也定义了背景色，同样会被之覆盖。
语法: <tr bgcolor="行的背景颜色">
说明：默认透明色，即和文档背景颜色相同
eg：
<html> <head> <meta charset="UTF-8"> <title>行背景</title> </head> <body> <table width="100%" border="5" bordercolor="red" cellspacing="10" cellpadding="20" bgcolor="gray"> <caption>考试成绩表</caption> <tr > <th>姓名</th><th>C</th><th>java</th><th>c++</th> </tr> <tr> <!--行也有对齐属性--> <td>张三</td><td>80</td><td>90</td><td>99</td> </tr> <tr> <td>李四</td><td>70</td><td>80</td><td>90</td> </tr> <tr> <td>王五</td><td>60</td><td>70</td><td>80</td> </tr> <tr height="200" bgcolor="green"> <td colspan="4">详细备注1:</td> <!--colspan="" 跨列合并单元格 rowspan=“”跨行合并单元格--> </tr> <tr height="200" background="image/timg.jpeg"> <td colspan="4">详细备注2:</td> <!--colspan="" 跨列合并单元格 rowspan=“”跨行合并单元格--> </tr> </table> </body> </html>运行结果：
<tr>的align属性用来控制表格当前行的水平对齐方式。它不受表格整体对齐方式的影响，却能够被单元格的对齐方式定义所覆盖
语法：<tr align="水平对齐方式">
eg:
<html> <head> <meta charset="UTF-8"> <title>行对齐方式</title> </head> <body> <table width="100%" border="5" bordercolor="red" cellspacing="10" cellpadding="20"> <caption>考试成绩表</caption> <tr> <th>姓名</th><th>C</th><th>java</th><th>c++</th> </tr> <tr align="center"> <!--行也有对齐属性--> <td>张三</td><td>80</td><td>90</td><td>99</td> </tr> <tr align="center"> <td>李四</td><td>70</td><td>80</td><td>90</td> </tr> <tr align="center"> <td>王五</td><td>60</td><td>70</td><td>80</td> </tr> <tr height="100" align="left"> <td colspan="4">详细备注:</td> <!--colspan="" 跨列合并单元格 rowspan=“”跨行合并单元格--> </tr> <tr height="100" align="right"> <td colspan="4">日期</td> <!--colspan="" 跨列合并单元格 rowspan=“”跨行合并单元格--> </tr> </table> </body> </html>运行结果：
语法:<tr valign="行垂直对齐方式">
说明:行垂直对齐方式取值有三种，top(文字顶端对齐),middle(文字居中对齐)，bottom(文字底端对齐)
eg：
<html> <head> <meta charset="UTF-8"> <title>行文字垂直对齐方式</title> </head> <body> <table width="80%" border="5" bordercolor="red" cellspacing="10" align="center"> <tr valign="middle" height="100"> <td>仙的寿命虽然动辄千年，却依然会有走到尽头的一天，凡人由生到死不过百年，自然会羡慕仙人，但是比起蜉蝣蝼蚁，人又何尝不是寿命长久？ </td> </tr> <tr valign="top" height="100"> <td>仙的寿命虽然动辄千年，却依然会有走到尽头的一天，凡人由生到死不过百年，自然会羡慕仙人，但是比起蜉蝣蝼蚁，人又何尝不是寿命长久？ </td> </tr> <tr valign="bottom" height="100"> <td>仙的寿命虽然动辄千年，却依然会有走到尽头的一天，凡人由生到死不过百年，自然会羡慕仙人，但是比起蜉蝣蝼蚁，人又何尝不是寿命长久？ </td> </tr> </table> </body> </html>运行结果：
可以自定义设置单元格的各项属性，这些样式将覆盖<table>和<tr>已经定义的样式
默认情况下，单元格的宽度高度会根据内容自动调整，也可以通过width和height设置单元格的宽度和高度
语法：<td width="单元格宽度" height="单元格高度">
说明：单位都是像素
eg:
<html> <head> <meta charset="UTF-8"> <title>表格标题</title> </head> <body> <table width="500" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#CC99CC"> <tbody> <tr> <td width="150" height="30" bgcolor="#ffffff">产品</td> <td bgcolor="#ffffff">价格</td> <td bgcolor="#ffffff">点击率</td> <td bgcolor="#ffffff">次数</td> </tr> <tr> <td height="20" bgcolor="#ffffff">TOXIC TIDE </td> <td bgcolor="#ffffff">$860元</td> <td bgcolor="#ffffff">点击率:</td> <td bgcolor="#ffffff">620次</td> </tr> <tr> <td bgcolor="#ffffff">飞过 Flutter</td> <td bgcolor="#ffffff">$375元</td> <td bgcolor="#ffffff">点击率:</td> <td bgcolor="#ffffff">630次</td> </tr> <tr> <td height="40" bgcolor="#ffffff">伊比利亚小</td> <td bgcolor="#ffffff">$1200元</td> <td bgcolor="#ffffff">点击率:</td> <td bgcolor="#ffffff">443次</td> </tr> <tr> <td height="20" bgcolor="#ffffff">斯沃琪</td> <td bgcolor="#ffffff">$580元</td> <td bgcolor="#ffffff">点击率:</td> <td bgcolor="#ffffff">495次</td> </tr> <tr> <td height="100" bgcolor="#ffffff"> 手表</td> <td bgcolor="#ffffff">$380元</td> <td bgcolor="#ffffff">点击率:</td> <td bgcolor="#ffffff">700次</td> </tr> </tbody> </table> </body> </html>运行结果：
语法：<td colspan="跨度的列数">
eg：
<html> <head> <meta charset="UTF-8"> <title>表格标题</title> </head> <body> <table width="500" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#CC99CC"> <!--这里定义bgcolor--> <tbody bgcolor="#ffffff"><!--这里也定义bgcolor(或者每个tr里定义) 从而达到最细边框的目的--> <tr> <td colspan="2" align="center">产品</td> </tr> <tr> <td >华为</td> <td>小米</td> </tr> <tr> <td>联想</td><td>三星</td> </tr> </tbody> </table> </body> </html>运行结果：
同上，不过在垂直方向合并单元格罢了 略
语法: <td rowspan="2">类别:</td>
语法: <td align="水平对齐方式" valign="垂直对齐方式">
说明:水平对齐方式:left，center,right
垂直对齐方式:top，middle,bottom
<!--和行的对齐方式完全一致-->
语法:<td bgcolor="背景颜色">
设置单个单元格的颜色
<!--用法和行，表格bgcolor一样-->
语法:<td bordercolor="颜色">
颜色为16进制数值
<!--用法和行，表格bordercolor一样 不过和行一样 不怎么有效-->
单元格亮边框指的是单元格边框向光的部分 bordercolorlight可以设置亮边框颜色
语法:<td bordercolorlight="亮边框颜色">
eg:
<html> <head> <meta charset="UTF-8"> <title>表格标题</title> </head> <body> <table width="500" border="1" align="center" cellpadding="0" cellspacing="1" bgcolor="#ffffff"> <!--这里定义bgcolor--> <tbody > <tr> <td colspan="2" align="center">产品</td> </tr> <tr> <td bordercolorlight="#3300ff">华为</td> <td>小米</td> </tr> <tr> <td>联想</td><td>三星</td> </tr> </tbody> </table> </body> </html>运行结果:
同行边框颜色一样，ubuntu下google浏览器就是不起作用
语法:<td bordercolordark="暗边框颜色">
<!--用法同上-->
语法: <td background="图片地址">
eg：
<html> <head> <meta charset="UTF-8"> <title>表格标题</title> </head> <body> <table> <tr> <td align="center">仙四语录</td> </tr> <tr> <td background="image/dzr.jpg"> 玄霄：阴阳两隔便已无解，除非时光倒流，不然一切都只是枉然…… 重光：我们为赎罪而活，但是否又不断在犯下新的罪…… 衔烛之龙：本尊今日令你得偿所愿，但是等你有朝一日，尝遍世间辛酸之时，或许又会怨恨这样的命运。 壬癸：你们人的情爱本来就没什么道理可言，明知不可为，偏要去做的事，恐怕比天上的星星还多！ 道臻：我从未想过，有朝一日，要守住其中一个誓言，便要毁去另一个…… 句芒/九天玄女：盘古有训，纵横六界，诸事皆有缘法！凡人仰观苍天，无明日月潜息、四时更替，幽冥之间，万物已循因缘，恒大者则为“天道”。 柳梦璃：人力虽然微渺，可是人的相争之心，却比任何东西都要可怕。 夙玉：容貌美丑，皆是皮下白骨，表象声色，又有什么分别？ 婵幽：万灵盛衰，乃是常理，无恒强、无恒弱。 </td> </tr> </table> </body> </html>运行结果：
还有一些标记是用来表示表格结构的，包括表首标记<thead>、表主体标记<tbody>以及表尾标记<tfoot>。这些通过成对出现的标记设置，应用到表格里用于整体规划表格的行列属性。使用这些标记能对表格的一行或多行单元格属性进行统一修改，从而省去了逐一修改单元格属性的麻烦。
用于定义表格最上端表首的样式，可以设置背景颜色、文字对齐方式、文字垂直对齐方式等。
语法：
<thead bgcolor="背景颜色" align="对齐方式"> ...... </thead>说明：thead还有属性bgcolor,align,valign,td,th,tr.但一个<table>只能有一个<thead>标签
eg:
<html> <head> <meta charset="UTF-8"> <title>表格表首标签</title> </head> <body> <table width="400" border="1" align="center" cellspacing="2" cellpadding="5"> <caption>购物网站列表</caption> <thead bgcolor="#FF33FF" align="center"> <tr> <td>产品名称</td><td>类型</td><td>价格</td> </tr> </thead> <tr> <td>手工编织围巾</td><td>围巾</td><td>50.00元</td> </tr> <tr> <td>音盒MP3</td><td>数码</td><td>1500.00元</td> </tr> <tr> <td>彩石巾手链</td><td>银饰</td><td>90.00元</td> </tr> <tr> <td colspan=3 align="right">欢迎光临本购物网站!</td> </tr> </table> </body> </html>运行结果:
与表首标签类似，表主体标签用于统一设计表主体部分的样式，标记为<tbody>
语法:
<tbody bgcolor="背景颜色" align="对齐方式"> ...... </tbody> 说明:bgcolor,align,valign等一系列样式。一个表中只能有一个<tbody>标记eg:
<html> <head> <meta charset="UTF-8"> <title>表格表首标签</title> </head> <body> <table width="400" border="1" align="center" cellspacing="2" cellpadding="5"> <caption>购物网站列表</caption> <thead bgcolor="#FF33FF" align="center"> <tr> <td>产品名称</td><td>类型</td><td>价格</td> </tr> </thead> <tbody bgcolor="green" align="center"><!--可以定义一部分为主体--> <tr> <td>手工编织围巾</td><td>围巾</td><td>50.00元</td> </tr> <tr> <td>音盒MP3</td><td>数码</td><td>1500.00元</td> </tr> <tr> <td>彩石巾手链</td><td>银饰</td><td>90.00元</td> </tr> </tbody> <tr> <td colspan=3 align="right">欢迎光临本购物网站!</td> </tr> </table> </body> </html>运行结果:
语法:
<tfoot bgcolor="背景颜色" align="对齐方式"> ...... </tfoot>说明: bgcolor,align,valign等一系列样式。一个表中只能有一个<tfoot>标记 eg： <html> <head> <meta charset="UTF-8"> <title>表格表首标签</title> </head> <body> <table width="400" border="1" align="center" cellspacing="2" cellpadding="5"> <caption>购物网站列表</caption> <thead bgcolor="#FF33FF" align="center"> <tr> <td>产品名称</td><td>类型</td><td>价格</td> </tr> </thead> <tbody bgcolor="green" align="center"><!--可以定义一部分为主体--> <tr> <td>手工编织围巾</td><td>围巾</td><td>50.00元</td> </tr> <tr> <td>音盒MP3</td><td>数码</td><td>1500.00元</td> </tr> <tr> <td>彩石巾手链</td><td>银饰</td><td>90.00元</td> </tr> </tbody> <tfoot bgcolor="red" align="right"> <tr> <td colspan=3 align="right">欢迎光临本购物网站!</td> </tr> </tfoot> </table> </body> </html>运行结果：
