html5cssjs代码 016 表格示例

html5&css&js代码 016 表格示例

一、代码
二、解释

这段HTML代码定义了一个网页，展示了不同类型的表格示例。页面使用了CSS样式来控制字体颜色、背景颜色、表格样式等。

一、代码

<!DOCTYPE html>
<html lang="zh-cn">
<head><title>编程笔记 html5&css&js 表格示例</title><meta charset="utf-8"/><style>body {color: cyan;background-color: teal;}.table-container {display: table;margin: 0 auto;/* 对于固定宽度的table，使用自动外边距 *//* 或者对于响应式布局，可以使用flexbox或grid布局实现居中 *//* 下面是使用flexbox布局的示例 *//* display: flex;justify-content: center; */}table {align-content: center;width: 800px;border: 2px solid #000;}h1, h2 {text-align: center;}table, th, td {border: 1px solid #000;}th, td {padding: 10px;}</style>
</head>
<body>
<div class="table-container"><h1>表格示例</h1><h2>含有表头的表格</h2><table><tr><th>姓名</th><th>爱好</th></tr><tr><td>王小五</td><td>编程</td></tr><tr><td>刘小六</td><td>电脑</td></tr></table><h2>含有表头、表尾和表格主体的表格</h2><table><thead><tr><th>水果</th><th>特点</th></tr></thead><tbody><tr><td>苹果</td><td>好吃</td></tr><tr><td>杮子</td><td>太酸</td></tr></tbody><tfoot><tr><td>所有水果</td><td>花钱买</td></tr></tfoot></table><h2>有列组的表格</h2><table><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>有列组和列的表格</h2><table><tr><th>青柠</th><th>柠檬</th><th>橘子</th></tr><tr><td>绿色</td><td>黄色</td><td>橙色</td></tr></table><h2>有标题的简单表格</h2><table><caption>美妙的标题</caption><tr><td>美妙的数据一</td></tr><tr><td>美妙的数据二</td></tr><tr><td>美妙的数据三</td></tr></table>
</div>
</body>
<footer style="text-align: center;margin: 30px;font-size: 1.5rem;font-weight: bold;color: #ffcc00;">HTML+CSS+JavaScript编程配套代码 作者：明月看潮生
</footer>
</html>

二、解释

这段HTML代码定义了一个网页，展示了不同类型的表格示例。页面使用了CSS样式来控制字体颜色、背景颜色、表格样式等。主要内容包括：

页面整体样式设置：body元素的字体颜色为cyan，背景颜色为teal；
.table-container元素通过display: table和margin: 0 auto实现居中显示；table元素设置了宽度、边框和内边距。
表格样式设置：table、th、td元素都有1px的边框，th和td元素有10px的内边距。
表格示例：包含了含有表头的表格、含有表头、表尾和表格主体的表格、有列组的表格、有列组和列的表格以及有标题的简单表格。
页面底部：包含了一个footer元素，居中显示，字体颜色为#ffcc00，字号为1.5rem，加粗。