<table>
    <tr>
        <td>表头1</td>
        <td>表头2</td>
    </tr>
    <tr>
        <td>内容1</td>
        <td>内容2</td>
    </tr>
</table>

若需要添加表头，可使用

接下来是CSS样式部分，这是实现响应式布局的关键。为了让表格在不同屏幕尺寸下自适应，可以使用媒体查询。例如，当屏幕宽度小于600px时，将表格设置为单列布局。

@media screen and (max-width: 600px) {
    table {
        width: 100%;
        display: block;
    }
    tr {
        display: block;
        margin-bottom: 10px;
    }
    td {
        display: block;
        text-align: left;
    }
}

在上述代码中，通过媒体查询，当屏幕宽度小于600px时，将表格的显示模式从默认的表格布局改为块级布局。每行

为了进一步优化表格样式，还可以设置表格边框、单元格间距等。使用 border-collapse: collapse; 可以使表格边框合并，减少空间占用。设置 padding 属性可以调整单元格内的内容间距。

table {
    border-collapse: collapse;
}
td, th {
    border: 1px solid #000;
    padding: 5px 10px;
}

通过合理运用HTML构建表格结构，结合CSS实现样式调整与响应式布局，就能打造出在各种设备上都能清晰展示、方便浏览的表格。掌握这些方法，能极大提升网页的用户体验，让内容在不同屏幕尺寸下都能完美呈现。

TAGS: CSS HTML 响应式布局 表格布局