HTML进阶 - 4.5 表格元素_网页什么时候会使用表格功能-CSDN博客

本文链接：https://blog.csdn.net/qq_44714543/article/details/122959405

本文介绍了HTML表格的使用，包括表格的结构元素如caption、thead、tbody、tfoot以及tr、th、td等，并展示了如何利用CSS进行表格样式美化，如设置边框合并、背景色、文字对齐等，同时还提供了一个《将进酒》诗歌的表格展示实例。

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

文章目录

表格元素
表格练习效果图
表格实现代码块

表格元素

在css技术出现之前，网页通常使用表格布局。后台管理系统中可能会使用表格。
前台：面向用户
后台：面向管理员。对界面要求不高，对功能性要求高。
为什么表格不再适用于网页布局？
因为表格的渲染速度过慢。
表格（table）分为标题（caption），表头（thead），表体（tbody），表尾（tfoot）四个部分。tr表示行，表头中的单元格为th，表体，表尾中的单元格为td。表格只有colspan以及rowspan来实现合并列，合并行操作。

表格练习效果图

在这里插入图片描述

表格实现代码块

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table{
            width: 100%;
            /* 设置表格的边框是否被合并 */
            border-collapse: collapse;
        }
        table caption{
            font-size: 2em;
            font-weight: bold;
            margin: 2px;
            text-align: center;
        }
        table th,td{
            border: 1px solid grey;
            text-align: center;
            padding: 10px;
        }
        table thead tr{
            background-color:#5a5c5a;
            color: #fff;
        }
        table tbody tr:nth-child(odd){
            background-color: #eee;
        }
        table tbody tr:hover{
            background-color: #ccc;
        }
        table tbody tr td:first-child{
            color: #aaa;
        }
        tfoot td{
            text-align: center;
        }
    </style>
</head>
<body>
    <table>
        <caption>将进酒</caption>
        <thead>
            <tr>
                <td>[唐]</td>
                <td>李白</td>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>君不见黄河之水天上来</td>
                <td>奔流到海不复回</td>
            </tr>
            <tr>
                <td>君不见高堂明镜悲白发</td>
                <td>朝如青丝暮成雪</td>
            </tr>
            <tr>
                <td>人生得意须尽欢</td>
                <td>莫使金樽空对月</td>
            </tr>
            <tr>
                <td>天生我材必有用</td>
                <td>千金散尽还复来</td>
            </tr>
            <tr>
                <td>烹羊宰牛且为乐</td>
                <td>会须一饮三百杯</td>
            </tr>
            <tr>
                <td>岑夫子，丹丘生</td>
                <td>将进酒，杯莫停</td>
            </tr>
            <tr>
                <td>与君歌一曲</td>
                <td>请君为我倾耳听</td>
            </tr>
            <tr>
                <td>钟鼓馔玉不足贵</td>
                <td>但愿长醉不复醒</td>
            </tr>
            <tr>
                <td>古来圣贤皆寂寞</td>
                <td>惟有饮者留其名</td>
            </tr>
            <tr>
                <td>陈王昔时宴平乐</td>
                <td>斗酒十千恣欢谑</td>
            </tr>
            <tr>
                <td>主人何为言少钱</td>
                <td>径须沽取对君酌</td>
            </tr>
            <tr>
                <td>五花马，千金裘</td>
                <td>呼儿将出换美酒</td>
            </tr>
        </tbody> 
            
        <tfoot>
            <td colspan="2">
                与尔同消万古愁！
            </td>
        </tfoot>
    </table>
</body>
</html>