表格
<table> 是一种用于组织和显示数据的结构化元素，非常适合展示表格化的数据，如报表、时间表、比较表等。以下是关于 HTML 表格的详细解析和示例代码。
HTML 表格的基本结构
HTML 表格由
<table> 标签定义，通常包含以下部分：
-
<thead>：表头部分，包含表格的标题行。 -
<tbody>：表格主体部分，包含表格的数据行。 -
<tfoot>：表格脚注部分，通常用于总结或说明。 -
<tr>：表格行，用于定义表格的一行。 -
<th>：表头单元格，用于定义表头内容。 -
<td>：表格数据单元格，用于定义表格的数据内容。
基本语法
<table><thead><tr><th>标题1</th><th>标题2</th><th>标题3</th></tr></thead><tbody><tr><td>数据1</td><td>数据2</td><td>数据3</td></tr><tr><td>数据4</td><td>数据5</td><td>数据6</td></tr></tbody><tfoot><tr><td>总结1</td><td>总结2</td><td>总结3</td></tr></tfoot></table><table> <thead> <tr> <th>标题1</th> <th>标题2</th> <th>标题3</th> </tr> </thead> <tbody> <tr> <td>数据1</td> <td>数据2</td> <td>数据3</td> </tr> <tr> <td>数据4</td> <td>数据5</td> <td>数据6</td> </tr> </tbody> <tfoot> <tr> <td>总结1</td> <td>总结2</td> <td>总结3</td> </tr> </tfoot> </table><table> <thead> <tr> <th>标题1</th> <th>标题2</th> <th>标题3</th> </tr> </thead> <tbody> <tr> <td>数据1</td> <td>数据2</td> <td>数据3</td> </tr> <tr> <td>数据4</td> <td>数据5</td> <td>数据6</td> </tr> </tbody> <tfoot> <tr> <td>总结1</td> <td>总结2</td> <td>总结3</td> </tr> </tfoot> </table>
示例代码
完整的 HTML 表格示例：
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><title>HTML 表格示例</title><style>table {width: 100%;border-collapse: collapse; /* 合并边框 */}th, td {border: 1px solid #ddd; /* 单元格边框 */padding: 8px; /* 单元格内边距 */text-align: center; /* 文本居中 */}th {background-color: #f2f2f2; /* 表头背景颜色 */}</style></head><body><h2>学生信息表</h2><table><thead><tr><th>姓名</th><th>年龄</th><th>班级</th></tr></thead><tbody><tr><td>张三</td><td>18</td><td>1班</td></tr><tr><td>李四</td><td>19</td><td>2班</td></tr><tr><td>王五</td><td>20</td><td>3班</td></tr></tbody><tfoot><tr><td>总计</td><td>57</td><td>3个班级</td></tr></tfoot></table></body></html><!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>HTML 表格示例</title> <style> table { width: 100%; border-collapse: collapse; /* 合并边框 */ } th, td { border: 1px solid #ddd; /* 单元格边框 */ padding: 8px; /* 单元格内边距 */ text-align: center; /* 文本居中 */ } th { background-color: #f2f2f2; /* 表头背景颜色 */ } </style> </head> <body> <h2>学生信息表</h2> <table> <thead> <tr> <th>姓名</th> <th>年龄</th> <th>班级</th> </tr> </thead> <tbody> <tr> <td>张三</td> <td>18</td> <td>1班</td> </tr> <tr> <td>李四</td> <td>19</td> <td>2班</td> </tr> <tr> <td>王五</td> <td>20</td> <td>3班</td> </tr> </tbody> <tfoot> <tr> <td>总计</td> <td>57</td> <td>3个班级</td> </tr> </tfoot> </table> </body> </html><!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>HTML 表格示例</title> <style> table { width: 100%; border-collapse: collapse; /* 合并边框 */ } th, td { border: 1px solid #ddd; /* 单元格边框 */ padding: 8px; /* 单元格内边距 */ text-align: center; /* 文本居中 */ } th { background-color: #f2f2f2; /* 表头背景颜色 */ } </style> </head> <body> <h2>学生信息表</h2> <table> <thead> <tr> <th>姓名</th> <th>年龄</th> <th>班级</th> </tr> </thead> <tbody> <tr> <td>张三</td> <td>18</td> <td>1班</td> </tr> <tr> <td>李四</td> <td>19</td> <td>2班</td> </tr> <tr> <td>王五</td> <td>20</td> <td>3班</td> </tr> </tbody> <tfoot> <tr> <td>总计</td> <td>57</td> <td>3个班级</td> </tr> </tfoot> </table> </body> </html>
解析
-
<table>：- 定义一个表格。
- 可以通过 CSS 设置表格的样式，如宽度、边框、背景颜色等。
-
<thead>：- 定义表格的表头部分。
- 通常包含一行或多行表头单元格（
<th>）。
-
<tbody>：- 定义表格的主体部分。
- 包含表格的数据行（
<tr>），每行包含多个数据单元格（<td>）。
-
<tfoot>：- 定义表格的脚注部分。
- 通常用于总结或说明，包含一行或多行单元格（
<td>）。
-
<tr>：- 定义表格的一行。
- 每行可以包含多个单元格（
<th>或<td>）。
-
<th>：- 定义表头单元格。
- 通常用于表格的标题行，内容会加粗并居中显示。
-
<td>：- 定义表格数据单元格。
- 用于存储表格的具体数据。
常用属性
-
colspan：- 定义单元格跨越的列数。
- 示例：
<td colspan="2">跨越两列</td>
-
rowspan：- 定义单元格跨越的行数。
- 示例：
<td rowspan="2">跨越两行</td>
-
border：- 定义表格的边框。
- 示例：
<table border="1">（不推荐，建议使用 CSS 设置边框）
示例：使用 colspan 和 rowspan
<table border="1"><tr><th>姓名</th><th>年龄</th><th>班级</th></tr><tr><td>张三</td><td>18</td><td>1班</td></tr><tr><td>李四</td><td>19</td><td>2班</td></tr><tr><td rowspan="2">王五</td><td>20</td><td>3班</td></tr><tr><td>21</td><td colspan="2">4班</td></tr></table><table border="1"> <tr> <th>姓名</th> <th>年龄</th> <th>班级</th> </tr> <tr> <td>张三</td> <td>18</td> <td>1班</td> </tr> <tr> <td>李四</td> <td>19</td> <td>2班</td> </tr> <tr> <td rowspan="2">王五</td> <td>20</td> <td>3班</td> </tr> <tr> <td>21</td> <td colspan="2">4班</td> </tr> </table><table border="1"> <tr> <th>姓名</th> <th>年龄</th> <th>班级</th> </tr> <tr> <td>张三</td> <td>18</td> <td>1班</td> </tr> <tr> <td>李四</td> <td>19</td> <td>2班</td> </tr> <tr> <td rowspan="2">王五</td> <td>20</td> <td>3班</td> </tr> <tr> <td>21</td> <td colspan="2">4班</td> </tr> </table>
总结
-
<table>：定义一个表格。 -
<thead>：定义表头部分。 -
<tbody>：定义表格主体部分。 -
<tfoot>：定义表格脚注部分。 -
<tr>：定义表格的一行。 -
<th>：定义表头单元格。 -
<td>：定义表格数据单元格。 - 常用属性：
colspan（跨越列数）、rowspan（跨越行数）、border（边框）。
来源链接：https://www.cnblogs.com/lwehne/p/18721383
© 版权声明
本站所有资源来自于网络，仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您(转载者)自己承担！
如有侵犯您的版权，请及时联系3500663466#qq.com(#换@)，我们将第一时间删除本站数据。
如有侵犯您的版权，请及时联系3500663466#qq.com(#换@)，我们将第一时间删除本站数据。
THE END
暂无评论内容