一、表格标签
1、基本格式：
每个表格由 table 标签开始。
每个表格行由 tr 标签开始。
每个表格数据由 td 标签开始。
例如：
<html> <head> <title>表格标签</title> <meta charset="utf-8"/> </head> <body> <table border="1"> <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> </body> </html>
表格标题：<caption>标签：
表格表头：<th>标签
例如：
<html> <head> <title>表格标签</title> <meta charset="utf-8"/> </head> <body> <table border="1"> <caption>一个表格</caption> <tr><th>1-1</th><td>1-2</td><td>1-3</td></tr> <tr><th>2-1</th><td>2-2</td><td>2-3</td></tr> <tr><th>3-1</th><td>3-2</td><td>3-3</td></tr> </table> </body> </html>
2、属性：
表格宽度 height:表格高度 border:边框 cellspacing:是表格里单元格之间的距离 cellpadding:表格里单元格内的空白部分 align:表格水平位置 summary:规定表格的摘要 bgcolor:规定表格的背景颜色(不赞成使用) align: 规定表格现象对周围元素的对齐方式。 值：left center righnt(); <td>的属性： *colspan="列数" *rowspan="行数"
例1(表格边框)：
<html> <head> <title>设置表格边框</title> <meta charset="utf-8"/> </head> <body> <h4>表格边框属性：设置无边框</h4> <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> <h4>表格边框属性：设置为border="1"</h4> <table border="1"> <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> <h4>表格边框属性：设置为border="8"</h4> <table border="8"> <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> </body> </html>
例2(跨行跨列表格)：
<html> <head> <title>表格标签</title> <meta charset="utf-8"/> </head> <body> <table border="1"> <caption>一个表格</caption> <!--rowspan实现跨行--> <tr><td rowspan="2">1-1</td><td>1-2</td><td>1-3</td></tr> <tr><td>2-2</td><td>2-3</td></tr> <!--colspan实现跨列--> <tr><td colspan="2">3-1</td><td>3-3</td></tr> </table> </body> </html>
例3(设置单元格间距):
<html> <head> <title>设置单元格间距</title> <meta charset="utf-8"/> </head> <body> <h4>单元格无间距</h4> <table border="1"> <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> <h4>单元格间距为8</h4> <table border="1" cellspacing="8"/> <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> </body> </html>
例4(单元格的边距):
<html> <head> <title>设置单元格边距</title> <meta charset="utf-8"/> </head> <body> <h4>默认单元格边距</h4> <table border="1"> <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> <h4>单元格边距为设置8</h4> <table border="1" cellpadding="8"/> <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> </body> </html>
例4(为单元格添加背景颜色或者背景图像):
<html> <head> <title>添加单元格背景</title> <meta charset="utf-8"/> </head> <body> <h4>背景设置为红色</h4> <table border="1" bgcolor="red"> <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> <h4>背景设置为蓝色</h4> <table border="1" bgcolor="blue"/> <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> <h4>为表格单元添加背景颜色</h4> <table border="1" bgcolor="blue"/> <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> </body> </html>
例5(对齐方式):
<html> <head> <title>表格的对齐方式</title> <meta charset="utf-8"/> </head> <body> <table width="400" border="1"> <tr> <th align="left">商品</th> <th align="right">原价</th> <th align="right">现价</th> </tr> <tr> <td align="left">衣服</td> <td align="right">$241.10</td> <td align="right">$50.20</td> </tr> <tr> <td align="left">围巾</td> <td align="right">$30.00</td> <td align="right">$44.45</td> </tr> <tr> <td align="left">裤子</td> <td align="right">$730.40</td> <td align="right">$650.00</td> </tr> <tr> <th align="left">总和</th> <th align="right">$1001.50</th> <th align="right">$744.65</th> </tr> </table> </body> </html>
例6(表格frame属性——配置边框是否可见)：
<html> <head> <title>表格frame属性</title> <meta charset="utf-8"/> </head> <body> <!--有边框--> <p style="color:blue"><strong>frame="box":</strong></p> <table frame="box"> <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> <!--只有上边框--> <p style="color:blue"><strong>frame="above":</strong></p> <table frame="above"> <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> <!--只有下边框--> <p style="color:blue"><strong>frame="below":</strong></p> <table frame="below"> <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> <!--只有上下边框--> <p style="color:blue"><strong>frame="hsides":</strong></p> <table frame="hsides"> <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> <!--只有左右边框--> <p style="color:blue"><strong>frame="vsides":</strong></p> <table frame="vsides"> <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> </body> </html>
3.thead、tbody、tfoot
表格一般分为三部分：
- thead：表格的头，用来存放标题之类的内容。
- tbody：表格的身体，用来存放数据本体内容。
- tfoot：表格的脚，用来存放表格的脚注之类的内容。
在写html代码时候，thead、tbody和tfoot的内容（不论在html代码中三者的先后顺序如何），最终呈现出来的都是thead、tbody和tfoot的顺序。
一般表格需要页面需要表格加载完全后才会显示出来。而加上thead、thead和tfoot后，会优先加载tbody的内容。