1. 你可以使用html创建表格。
2. 表格
2.1. 表格由<table>标签来定义。
2.2. 每个表格均有若干行(由<tr>标签定义), 每行被分割为若干单元格(由<td>标签定义)。
2.3. 简单的html表格由table元素以及一个或多个tr、th或td元素组成。
2.4. 更复杂的html表格也可能包括caption、col、colgroup、thead、tfoot以及tbody元素。
2.5. <table>标签可选属性
3. <tr>标签
3.1. <tr>标签定义html表格中的行。
3.2. tr元素包含一个或多个th或td元素。
3.3. 可选属性
4. <th>标签
4.1. <th>标签定义表格内的表头单元格。
4.2. html表单中有两种类型的单元格:
表头单元格: 包含表头信息(由th元素创建)
标准单元格: 包含数据(由td元素创建)
4.3. th元素内部的文本通常会呈现为居中的粗体文本, 而td元素内的文本通常是左对齐的普通文本。
4.4. 可选属性
5. <td>标签
5.1. <td>标签定义html表格中的标准单元格。
5.2. td元素中的文本一般显示为正常字体且左对齐。
5.3. 字母td(table data)指表格数据, 即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
5.4. 可选属性
5.5. 实例
5.5.1. 代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>表格</title> <meta charset="utf-8" /> </head> <body> <table> <tr> <th>table head 1</th> <th>table head 2</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>5.2.2. 效果图
6. <table>标签的border属性
6.1. 如果不定义边框属性, 表格将不显示边框。有时这很有用, 但是大多数时候, 我们希望显示边框。
6.2. border属性规定规定围绕表格的边框的宽度。
6.3. border属性会为每个单元格应用边框, 并用边框围绕表格。如果border属性的值发生改变, 那么只有表格周围边框的尺寸会发生变化。表格内部的边框则是1像素宽。
6.4. 从实用角度出发, 最好不要规定边框, 而是使用CSS来添加边框样式和颜色。
6.5. 实例
6.5.1. 代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>表格边框</title> <meta charset="utf-8" /> </head> <body> <table border="1"> <tr> <th>table head 1</th> <th>table head 2</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> <table border="10"> <tr> <th>table head 1</th> <th>table head 2</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>6.5.2. 效果图
7. <table>标签的cellpadding属性
7.1. cellpadding属性规定单元边沿与其内容之间的空白。
7.2. 从实用角度出发, 最好不要规定cellpadding, 而是使用CSS来添加内边距。
7.3. 实例
7.3.1. 代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>cellpadding属性规定单元边沿与其内容之间的空白</title> <meta charset="utf-8" /> </head> <body> <h4>没有 cellpadding：</h4> <table border="1"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> <h4>带有 cellpadding：</h4> <table border="1" cellpadding="10"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> </body> </html>7.3.2. 效果图
8. <table>标签的cellspacing属性
8.1. cellspacing属性规定单元格之间的空间。
8.2. 实例
8.2.1. 代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>cellspacing属性规定单元格之间的空间</title> <meta charset="utf-8" /> </head> <body> <h4>没有 cellspacing：</h4> <table border="1"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> <h4>带有 cellspacing：</h4> <table border="1" cellspacing="10"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> </body> </html>8.2.2. 效果图
9. <th>标签和<td>标签的colspan属性和rowspan属性
9.1. colspan合并列单元格。
9.2. rowspan合并行单元格。
9.3. 实例
9.3.1. 代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>横跨多行多列单元格</title> <meta charset="utf-8" /> </head> <body> <h4>横跨两列的单元格：</h4> <table border="1"> <tr> <th>姓名</th> <th colspan="2">电话</th> </tr> <tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td> </tr> </table> <h4>横跨两行的单元格：</h4> <table border="1"> <tr> <th>姓名</th> <td>Bill Gates</td> </tr> <tr> <th rowspan="2">电话</th> <td>555 77 854</td> </tr> <tr> <td>555 77 855</td> </tr> </table> </body> </html>9.3.2. 效果图
10. <thead>、<tbody>和<tfoot>标签
10.1 定义和用法
10.1.1. <thead>标签定义表格的表头。该标签用于组合html表格的表头内容。
10.1.2. <tbody>标签定义表格主体(正文)。该标签用于组合html表格的主体内容。
10.1.3. <tfoot>标签定义表格的页脚(脚注或表注)。该标签用于组合html表格中的表注内容。
10.1.4. thead与tbody和tfoot元素应该结合起来使用。
10.1.5. 如果您使用thead、tfoot以及tbody元素, 您就必须使用全部的元素。它们的出现次序是: thead、tfoot、tbody, 这样浏览器就可以在收到所有数据前呈现页脚了。您必须在table元素内部使用这些标签。
10.1.6. thead、tfoot以及tbody元素使您有能力对表格中的行进行分组。当您创建某个表格时, 您也许希望拥有一个标题行, 一些带有数据的行, 以及位于底部的一个总计行。这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。当长的表格被打印时, 表格的表头和页脚可被打印在包含表格数据的每张页面上。
10.1.7. <thead>内部必须拥有<tr>标签。
10.2. <thead>可选属性
10.3. <tbody>可选属性
10.4. <tfoot>可选属性
10.5. 实例
10.5.1. 代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>thead、tbody和tfoot标签</title> <meta charset="utf-8" /> </head> <body> <table border="1"> <thead> <tr> <th>Month</th> <th>Savings</th> </tr> </thead> <tbody> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </tbody> <tfoot> <tr> <td>Sum</td> <td>$180</td> </tr> </tfoot> </table> </body> </html>10.5.2. 效果图
11. <caption>标签
11.1. caption标签定义表格标题。
11.2. caption标签必须紧随table标签之后。您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。
11.3. 可选属性
11.4. 例子
11.4.1. 代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>caption标签定义表格标题</title> <meta charset="utf-8" /> </head> <body> <table border="6"> <caption>我的标题</caption> <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>11.4.2. 效果图
