表格

最新推荐文章于 2025-04-06 00:15:00 发布

转载最新推荐文章于 2025-04-06 00:15:00 发布 · 45 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/halai/p/6836980.html

本文介绍了HTML中表格的基本写法及如何通过colspan和rowspan属性实现单元格的合并。提供了完整的示例代码，展示了如何创建带有表头的表格，并详细解释了如何在表格中进行单元格的横向和纵向合并。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、基本写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        table{
            border-collapse: collapse; /*取消边框之间的间隙*/
        }
        th,td{
            padding: 0px;
        }
    </style>
</head>
<body>
    <table border="1"> <!-- 设置表格边框 -->
        <thead> <!-- 表头 -->
            <tr> 
                <th>星期一</th>
                <th>星期二</th>
                <th>星期三</th>
                <th>星期四</th>
                <th>星期五</th>
            </tr>
        </thead>
        <tbody> <!-- body -->
            <tr>  <!-- 行 -->
                <td>1</td> <!-- 列 -->
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

2、合并单元格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        table{
            border-collapse: collapse; /*取消边框之间的间隙*/
        }
        th,td{
            padding: 0px;
        }
    </style>
</head>
<body>
    <table border="1"> <!-- 设置表格边框 -->
        <thead> <!-- 表头 -->
            <tr> 
                <th>星期一</th>
                <th>星期二</th>
                <th>星期三</th>
                <th>星期四</th>
                <th>星期五</th>
            </tr>
        </thead>
        <tbody> <!-- body -->
            <tr>  <!-- 行 -->
                <td colspan="2">1</td>  <!-- 合并列单元格 -->
                <!-- <td>2</td> -->   <!-- 需要删除一列 -->
                <td>3</td>
                <td>4</td>
                <td>5</td>
            </tr>
            <tr>  <!-- 行 -->
                <td>1</td>  
                <td>3</td>
                <td>4</td>
                <td rowspan="2">5</td>  <!-- 合并行单元格 -->
                <td>1</td>
            </tr>
            <tr>  
                <td>1</td> 
                <td>3</td>
                <td>4</td>
                <!-- <td>5</td> -->   <!-- 合并行单元格删除 -->
                 <td>1</td>
            </tr>
        </tbody>
    </table>
</body>
</html>