HTML表格标签

最新推荐文章于 2024-08-30 16:57:43 发布

救救孩子吧8༼⍤༽

最新推荐文章于 2024-08-30 16:57:43 发布

阅读量39

点赞数

分类专栏： html+css学习文章标签： html 前端

本文链接：https://blog.csdn.net/m0_49553751/article/details/132868132

版权

html+css学习专栏收录该内容

44 篇文章 0 订阅

订阅专栏

本文介绍了HTML中表格的基本用法，包括table,tr,th,td标签的用法，如何添加边框，以及thead,tbody,tfoot的使用来区分表格结构。还讲解了合并单元格的方法，如跨行和跨列合并，以及删除多余单元格。

摘要由CSDN通过智能技术生成

基本用法

网页中的表格与Excel相似，用来展示数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格</title>
</head>
<body>
    <table border="1">
        <tr>
            <th>比奇堡</th>
            <th>羊村</th>
            <th>狗熊岭</th>
            <th>翻斗乐园</th>
        </tr>
        <tr>
            <td>海绵宝宝</td>
            <td>喜羊羊</td>
            <td>熊大</td>
            <td>图图</td>
        </tr>
        <tr>
            <td>派大星</td>
            <td>慢羊羊</td>
            <td>熊二</td>
            <td>牛爷爷</td>
        </tr>
        <tr>
            <td>章鱼哥</td>
            <td>懒羊羊</td>
            <td>光头强</td>
            <td>赵英俊</td>
        </tr>
    </table>
</body>
</html>

实现效果

表格结构标签

作用

用表格结构标签把内容划分区域，让表格结构更清晰，语义更清晰。加结构标签在网页中显示效果没有变化。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格</title>
</head>
<body>
    <table border="1">
        <thead>
          <tr>
            <th>比奇堡</th>
            <th>羊村</th>
            <th>狗熊岭</th>
            <th>翻斗乐园</th>
          </tr>
        </thead>
       <tbody>
        <tr>
            <td>海绵宝宝</td>
            <td>喜羊羊</td>
            <td>熊大</td>
            <td>图图</td>
        </tr>
        <tr>
            <td>派大星</td>
            <td>慢羊羊</td>
            <td>熊二</td>
            <td>牛爷爷</td>
        </tr>
       </tbody>
        <tfoot>
            <tr>
              <td>章鱼哥</td>
              <td>懒羊羊</td>
              <td>光头强</td>
              <td>赵英俊</td>
            </tr>
        </tfoot>
        
    </table>
</body>
</html>

实现效果

合并单元格

作用

将多个单元格合并成一个单元格，以合并同类信息（不可以跨结构标签合并）

合并单元格步骤

明确合并目标
保留左上单元格，添加属性（取值是数字，表示需要合并的单元格数量）

跨行合并，保留最上单元格，添加属性roespan

跨列合并，保留最左单元格，添加属性colspan

3. 删除其他单元格

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>合并单元格</title>
</head>
<body>
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格</title>
</head>
<body>
    <table border="1">
        <thead>
          <tr>
            <th>比奇堡</th>
            <th>羊村</th>
            <th>狗熊岭</th>
            <th>翻斗乐园</th>
          </tr>
        </thead>
       <tbody>
        <tr>
            <td>海绵宝宝</td>
            <td>喜羊羊</td>
            <td rowspan="2">熊大,熊二</td>
            <td>图图</td>
        </tr>
        <tr>
            <td>派大星</td>
            <td>慢羊羊</td>
            <!-- <td>熊二</td> -->
            <td>牛爷爷</td>
        </tr>
       </tbody>
        <tfoot>
            <tr>
              <td>总结</td>
              <td colspan="3">动画片</td>
              <!-- <td>动画片</td>
              <td>动画片</td> -->
            </tr>
        </tfoot>
        
    </table>
</body>
</html>
</body>
</html>