标签：
<html> <body> <p>每个表格由table标签开始</p> <p>每个表格行由tr标签开始</p> <p>每个表格数据由td标签开始</p> <h4>一列：</h4> <table border="1"> <tr> <td>100</td> </tr> </table> <h4>一行三列</h4> <table border="1"> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> </table> <h4>两行三列</h4> <table border="1"> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> <table> </body> </html>
其中，通过设置border属性设置表格边框。如果不定义边框属性，表格将不显示边框。
表格由<table>标签定义。每个表格均有若干行（由<tr>标签定义），每行被分割为若干单元格（由<td>标签定义）。字母td指表格数据（table data），即单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
表格的表头使用<th>标签定义，大多数浏览器会把表头显示为粗体居中的文本：
<html> <body> <table> <tr> <th>两行</th> <th>三列</th> </tr> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> <table> </body> </html>
在一些浏览器中，没有内容的表格单元显示的不太好。如果某个单元格空的(没有内容),浏览器可能无法显示这个单元格的边框。
<html> <body> <table border="1"> <tr> <th>两行</th> <th>三列</th> </tr> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> <tr> <!在一些浏览器中下面两行可能没有边框> <td></td> <td></td> <td>600</td> </tr> </table> </body> </html>
为了避免这种情况，在空单元格中添加一个空格占位符，就可以将边框显示出来
<td> </td> <!添加空格占位符>
表格中的表头
<html> <body> <table border="1"> <tr> <th>姓名</th> <th>年龄</th> <th>联系方式</th> </tr> <tr> <td>张三</td> <td>28</td> <td>10086</td> </tr> <tr> <td>李四</td> <td>18</td> <td>10000</td> </tr> </table> </body> </html>
对于一些浏览器，一个单元因为是空的，该单元插入一个空格以后没有边框。我们的技巧是插入一个no—breaking空格。这个空格是一个字符实体，由和号（"&"）开始，然后是字符"nbsp"，并以分号结尾";".
带有标题的表格
<html> <body> <table border="1"> <caption>我是一个有标题的表格</caption> <tr> <th>姓名</th> <th>年龄</th> <th>联系方式</th> </tr> <tr> <td>张三</td> <td>28</td> <td>10086</td> </tr> <tr> <td>李四</td> <td>18</td> <td>10000</td> </tr> </table> </body> </html>
caption元素定义表格标题，caption标签必须紧跟table标签之后，通常这个标题会被居中于表格之上。
跨行或跨列的表格单元格
<th>标签的rowspan设置可横跨的行数，colspan设置可横跨的列数
<table border="1"> <caption>我是横跨两行的单元格</caption> <tr> <th>姓名</th> <td>张三</th> </tr> <tr> <th rowspan="2">联系方式</th> <td>10000</td> </tr> <tr> <td >10086</td> </tr> </table> <table border="1"> <caption>我是横跨两列的单元格</caption> <tr> <th>姓名</th> <th colspan="2">联系方式</td> </tr> <tr> <td>李四</td> <td>100000</td> <td>100001</td> </tr> </table> </body> </html>
注意：横跨两行和横跨两列方式是不一样的。横跨两列的先写标题再写内容。横跨两列的要先写一个的标题内容，再另外起行写另一个内容。
<tr> <th rowspan="2">联系方式</th> <td>10000</td> </tr> <tr> <td >10086</td> </tr>
三行的话分三次写入内容
<tr> <th rowspan="3">联系方式</th> <!第一次写入内容> <td>10000</td> </tr> <tr> <!第二次写入内容> <td >10086</td> </tr> <tr> <!第三次写入内容> <td >10087</td> </tr>
表格内的标签
<!td定义表格单元，th定义表格表头，tr定义表格行，table定义表格，border定义表格边框> <!ul是无法HTML列表，通过嵌套达到效果> <html> <body> <table border="1"> <tr> <td> <p>这是一个苹果</p> <p>这不是一个梨</p> </td> <td>这个单元包含一个表格: <table border="1"> <tr> <td>劫</td> <td>AKL</td> </tr> <tr> <td>ZED</td> <td>卡萨丁</td> </tr> </table> </td> </tr> <tr> <td>这个单元包含一个列表 <ul> <li>苹果</li> <li>香蕉</li> <li>梨</li> </ul> </td> <td>HELLO</td> </tr> </table> </body> </html>
通过cellpadding属性设置边框与内容的之间的空白
<html> <body> <h4>没有cellpadding的列表</h4> <table border="1"> <tr> <td>First</td> <td>Second</td> </tr> <tr> <td>four</td> <td>five</td> </tr> </table> <h4>有cellpadding的列表</h4> <table border="1" cellpadding="10"> <tr> <td>First</td> <td>Second</td> </tr> <tr> <td>four</td> <td>five</td> </tr> </table> </body> </html>
通过设置cellspacing属性设置单元格之间的间距<例子与上述相似，不再举例>
通过设置bgcolor属性设置背景颜色，通过background设置背景图
<html> <body> <h4>有北京颜色的列表</h4> <table border="1" bgcolor="yellow"> <tr> <td>First</td> <td>Second</td> </tr> <tr> <td>four</td> <td>five</td> </tr> </table> <h4>有背景图片的列表</h4> <table border="1" background="D:\1.jpg"> <tr> <td>First</td> <td>Second</td> </tr> <tr> <td>four</td> <td>five</td> </tr> </table> </body> </html>
向单元格添加背景颜色或者背景图片
<html> <body> <h4>向表格单元添加背景图或者背景颜色</h4> <table border="1"> <tr> <td bgcolor="yellow">First</td> <td>Second</td> </tr> <tr> <td background="D:\0.jpg">four</td> <td>five</td> </tr> </table> </body> </html>
在表格单元中排列内容，通过设置align属性
<html> <body> <h4>在表格单元中排列内容</h4> <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">100</td> <td align="right">200</td> </tr> </table> </body> </html>
通过设置table标签的frame属性规定外侧边框的那个部分是可见的
<html> <body> <h4>frame的值为void,没有边框</h4> <table width="400" frame="void"> <tr> <th align="left">百事可乐</th> <th align="right">一月</th> <th align="right">二月</th> </tr> <tr> <td align="left">数量</td> <td align="right">100</td> <td align="right">200</td> </tr> </table> <h4>frame的值为above，边框线只有上方显示</h4> <table width="400" frame="above"> <tr> <th align="left">百事可乐</th> <th align="right">一月</th> <th align="right">二月</th> </tr> <tr> <td align="left">数量</td> <td align="right">100</td> <td align="right">200</td> </tr> </table> <h4>frame的值为below，边框线下方显示</h4> <table width="400" frame="below"> <tr> <th align="left">百事可乐</th> <th align="right">一月</th> <th align="right">二月</th> </tr> <tr> <td align="left">数量</td> <td align="right">100</td> <td align="right">200</td> </tr> </table> <h4>frame的值为hsides，边框线上下显示，左右不显示</h4> <table width="400" frame="hsides"> <tr> <th align="left">百事可乐</th> <th align="right">一月</th> <th align="right">二月</th> </tr> <tr> <td align="left">数量</td> <td align="right">100</td> <td align="right">200</td> </tr> </table> <h4>frame的值为lhs，边框线左边显示，其他三方不显示</h4> <table width="400" frame="lhs"> <tr> <th align="left">百事可乐</th> <th align="right">一月</th> <th align="right">二月</th> </tr> <tr> <td align="left">数量</td> <td align="right">100</td> <td align="right">200</td> </tr> </table> <h4>frame的值为rhs，边框线右边显示</h4> <table width="400" frame="rhs"> <tr> <th align="left">百事可乐</th> <th align="right">一月</th> <th align="right">二月</th> </tr> <tr> <td align="left">数量</td> <td align="right">100</td> <td align="right">200</td> </tr> </table> <h4>frame的值为vside，不显示边框</h4> <table width="400" frame="vside"> <tr> <th align="left">百事可乐</th> <th align="right">一月</th> <th align="right">二月</th> </tr> <tr> <td align="left">数量</td> <td align="right">100</td> <td align="right">200</td> </tr> </table> <h4>frame的值为box</h4> <table width="400" frame="box"> <tr> <th align="left">百事可乐</th> <th align="right">一月</th> <th align="right">二月</th> </tr> <tr> <td align="left">数量</td> <td align="right">100</td> <td align="right">200</td> </tr> </table> <h4>frame的值为border</h4> <table width="400" frame="border"> <tr> <th align="left">百事可乐</th> <th align="right">一月</th> <th align="right">二月</th> </tr> <tr> <td align="left">数量</td> <td align="right">100</td> <td align="right">200</td> </tr> </table> </body> </html>
标签：
原文地址：http://www.cnblogs.com/changzuidaerguai/p/5628661.html
