表格是一种常用的文档格式。学习或办公过程中也常常使用表格。有专用的电子表格软件，如EXCEL、WPS表格等。表格也经常与文字混合在文章中使用。网页中也是一样，需要表格这种形式。
一、HTML 表格
是一种用于展示和组织数据的标记语言。表格由行和列组成，每个单元格可以包含文本、图像或其他 HTML 元素。下面是一个简单的 HTML 表格示例：
<table> <tr> <th>姓名</th> <th>年龄</th> <th>性别</th> </tr> <tr> <td>张三</td> <td>25</td> <td>男</td> </tr> <tr> <td>李四</td> <td>30</td> <td>女</td> </tr> </table>
在这个例子中，<table> 元素表示一个表格。<tr> 元素表示表格中的一行。<th> 元素表示表头单元格，用于显示列的标题。<td> 元素表示数据单元格，用于显示实际的数据。
这个表格有三个列：姓名、年龄和性别，以及两行数据。可以使用 CSS 来设置表格的样式，例如调整边框、背景颜色和字体样式等：
<style> table { border-collapse: collapse; width: 100%; } th, td { border: 1px solid black; padding: 8px; text-align: left; } th { background-color: #f2f2f2; } </style>
通过在 <style> 标签中添加 CSS 样式，可以实现表格的自定义样式。
这只是一个简单的表格示例，HTML 表格还有许多其他的功能和属性，例如合并单元格、设置表格宽度和高度等。可以在不同的教程和资源中深入学习更多关于 HTML 表格的知识。
二、HTML 表格标签
以下是一些常用的HTML表格标签及其用法：
<table>：定义表格，包含所有的表格内容。<tr>：定义表格行，包含表格中的一行数据。<td>：定义表格数据单元格，包含表格中的一个数据项。<th>：定义表格标题单元格，用于在表头中显示标题。<caption>： 定义表格标题<thead>：定义表格的表头部分，通常包含表头行。<tbody>：定义表格的主体部分，包含行和数据单元格。<tfoot>：定义表格的页脚部分，通常包含总结性信息。<col>： 定义用于表格列的属性。<colgroup>：定义表格列的组。
三、边框属性
如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。
使用边框属性来显示一个带有边框的表格：
<table border="1"> <tr> <td>Row 1, cell 1</td> <td>Row 1, cell 2</td> </tr> </table>
四、单元格合并
在HTML中，可以使用colspan和rowspan属性来合并单元格。
colspan属性可以用于合并单行中的多个单元格，它指定了要合并的单元格数目。
<table> <tr> <td colspan="2">单元格1</td> <td>单元格2</td> </tr> <tr> <td>单元格3</td> <td>单元格4</td> <td>单元格5</td> </tr> </table>
上面的示例中，第一行的第一个单元格使用了colspan="2"，表示要合并两个单元格，所以它占据了两列的宽度。rowspan属性可以用于合并单列中的多个单元格，它指定了要合并的单元格数目。
<table> <tr> <td rowspan="2">单元格1</td> <td>单元格2</td> <td>单元格3</td> </tr> <tr> <td>单元格4</td> <td>单元格5</td> </tr> </table>
上面的示例中，第一列的第一个单元格使用了rowspan="2"，表示要合并两个单元格，所以它占据了两行的高度。
五、操作
<!DOCTYPE html> <html lang="zh-cn"> <head> <title>编程笔记 html5&css&js HTML表格</title> <meta charset="utf-8" /> <style> body { color: cyan; background-color: teal; } </style> </head> <body> <h2 align="center">含有表头的表格</h2> <table align="center" width="700" border="1px"> <tr> <th>姓</th> <th>名</th> </tr> <tr> <td>John</td> <td>Doe</td> </tr> <tr> <td>Jane</td> <td>Doe</td> </tr> </table> <h2 align="center">含有表头、表尾和表格主体的表格</h2> <table align="center" width="700" border="1px"> <thead> <tr> <th>表头内容 1</th> <th>表头内容 2</th> </tr> </thead> <tbody> <tr> <td>表格主体内容 1</td> <td>表格主体内容 2</td> </tr> </tbody> <tfoot> <tr> <td>表尾内容 1</td> <td>表尾内容 2</td> </tr> </tfoot> </table> <h2 align="center">有列组的表格</h2> <table align="center" width="700" border="1px"> <colgroup span="4"></colgroup> <tr> <th>国家</th> <th>首都</th> <th>人口数量</th> <th>语言</th> </tr> <tr> <td>美国</td> <td>华盛顿</td> <td>3.09 亿</td> <td>英语</td> </tr> <tr> <td>瑞典</td> <td>斯德哥尔摩</td> <td>900 万</td> <td>瑞典语</td> </tr> </table> <h2 align="center">有列组和列的表格</h2> <table align="center" width="700" border="1px"> <colgroup> <col style="background-color: #0f0" /> <col span="2" /> </colgroup> <tr> <th>青柠</th> <th>柠檬</th> <th>橘子</th> </tr> <tr> <td>绿色</td> <td>黄色</td> <td>橙色</td> </tr> </table> <h2 align="center">有标题的简单表格</h2> <table align="center" width="700" border="1px"> <caption>美妙的标题</caption> <tr> <td>美妙的数据</td> </tr> </table> </body> </html>
小结
在实际 的编程中，很多是需要动态生成表格。这前要熟练掌握静态表格的使用。
