HTML 表格

什么是 HTML 表格？

HTML 表格是通过 <table> 标签定义的，用于在网页中显示表格数据。

HTML 表格的基本结构

<table> 
    <tr> 
        <th>表头1</th> 
        <th>表头2</th> 
        
    </tr> 
    <tr> 
        <td>单元格1</td> 
        <td>单元格2</td> 
        
    </tr> 
</table>

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>

HTML 表格的属性

border - 设置表格边框的宽度
width - 设置表格的宽度
height - 设置表格的高度
cellpadding - 设置单元格内边距
cellspacing - 设置单元格间距

<table border="1" width="100%" cellpadding="10" cellspacing="5"> 
    
    
    
    
    
    <tr> 
        <th>姓名</th> 
        <th>年龄</th> 
    </tr> 
    
    <tr> 
        <td>张三</td> 
        <td>25</td> 
    </tr> 
</table>

HTML 表格的单元格合并

您可以使用 colspan 和 rowspan 属性来合并单元格。

<table border="1"> 
    <tr> 
        <th colspan="2">个人信息</th> 
        
    </tr> 
    
    <tr> 
        <td>姓名</td> 
        <td>张三</td> 
    </tr> 
    
    <tr> 
        <td rowspan="2">联系方式</td> 
        
        <td>电话：13800138000</td> 
    </tr> 
    
    <tr> 
        
        <td>邮箱：[email protected]</td> 
    </tr> 
</table>

HTML 表格的表头、表体和表脚

HTML 表格可以分为表头 (<thead>)、表体 (<tbody>) 和表脚 (<tfoot>) 三部分。

<table border="1"> 
    <thead> 
        <tr> 
            <th>产品</th> 
            <th>价格</th> 
        </tr> 
    </thead> 
    
    <tbody> 
        <tr> 
            <td>产品1</td> 
            <td>100元</td> 
        </tr> 
        <tr> 
            <td>产品2</td> 
            <td>200元</td> 
        </tr> 
    </tbody> 
    
    <tfoot> 
        <tr> 
            <td>总计</td> 
            <td>300元</td> 
        </tr> 
    </tfoot> 
</table>

HTML 表格的样式

您可以使用 CSS 来自定义表格的样式。

<style> /* 内部样式表，定义表格的自定义样式 */
table { /* 为 table 元素设置样式 */
    width: 100%; /* 设置表格宽度为 100%，适应容器宽度 */
    border-collapse: collapse; /* 合并表格边框，使边框看起来更整洁 */
    font-family: Arial, sans-serif; /* 设置表格字体为 Arial 或 sans-serif 替代 */
}

table th, table td { /* 为 th 和 td 元素设置样式 */
    padding: 10px; /* 设置单元格内边距为 10 像素，增加内容与边框的距离 */
    text-align: left; /* 设置文本对齐方式为左对齐 */
    border-bottom: 1px solid #ddd; /* 设置底部边框为 1 像素实线，颜色为浅灰色 */
}

table th { /* 为 th 元素设置样式 */
    background-color: #f2f2f2; /* 设置背景颜色为浅灰色，使表头更醒目 */
    font-weight: bold; /* 设置字体为粗体 */
}

table tr:hover { /* 为鼠标悬停时的 tr 元素设置样式 */
    background-color: #f5f5f5; /* 设置背景颜色为浅灰色，提供视觉反馈 */
}
</style> /* 结束内部样式表 */

<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>