html5表格,```html HTML5 表格示例
下面是一个简单的 HTML5 表格示例：
```html HTML5 表格示例
学生信息表 姓名 年龄 性别 张三 20 男 李四 22 女
这个示例创建了一个简单的表格，包含学生姓名、年龄和性别信息。你可以根据自己的需求调整表格的结构和内容。
HTML5表格：构建高效且美观的数据展示
HTML5表格的基本语法
```html
姓名
年龄
城市
张三
25
北京
李四
30
上海
- ``：定义表格标题，通常位于表格的第一行。
- ``：定义表格的表头部分，包含表头行。
- ``：定义表格的主体部分，包含数据行。
- ``：定义表格的表脚部分，通常用于显示总计或统计信息。
表格的样式优化
- `border-collapse`: 控制表格边框的合并方式。
- `border`: 设置表格边框的样式、宽度和颜色。
- `background-color`: 设置表格的背景颜色。
- `text-align` 和 `vertical-align`: 设置单元格内文本的对齐方式。
以下是一个简单的CSS样式示例：
```css
table {
width: 100%;
border-collapse: collapse;
th, td {
border: 1px solid 333;
padding: 8px;
text-align: left;
th {
background-color: f2f2f2;
表格的响应式设计
随着移动设备的普及，响应式设计变得越来越重要。为了确保表格在不同设备上都能良好显示，我们可以使用媒体查询来调整表格的样式。
以下是一个简单的响应式表格样式示例：
```css
@media (max-width: 600px) {
table {
display: block;
overflow-x: auto;
th, td {
display: block;
width: 100%;
th {
background-color: f2f2f2;
在这个示例中，当屏幕宽度小于600像素时，表格将变为块状布局，并且每个单元格将占据100%的宽度，从而适应小屏幕设备。
