首页 > 其他分享 >HTML表格使用全指南,真的很详细

HTML表格使用全指南,真的很详细

时间:2024-06-20 17:28:37浏览次数:27  
标签:指南 表格 单元格 width HTML table border

HTML表格基础与语义化:构建结构化数据展示

HTML表格是展示结构化数据的强大工具。通过合理的语义化标签使用,开发者可以创建出既美观又易于理解的表格。本文将介绍HTML表格的基本结构和语法,以及如何使用<caption><thead><tbody><tfoot><th>标签进行表格的语义化。

HTML表格的基本结构

HTML表格的基本结构包括<table><tr><th><td>标签:

  • <table>:定义表格容器。
  • <tr>:定义表格行。
  • <th>:定义表头单元格,通常用于列标题或行标题。
  • <td>:定义表格单元格,用于存储数据。
表格的语义化

使用语义化标签可以帮助屏幕阅读器和其他辅助技术更好地理解表格内容:

  • <caption>:为表格提供简短的描述或标题。
  • <thead>:定义表格的头部区域,包含列标题。
  • <tbody>:定义表格的主体区域,包含数据行。
  • <tfoot>:定义表格的脚部区域,通常用于总结信息。
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML Table Example</title>
    <style>
        table, th, td {
            border: 1px solid black;
            border-collapse: collapse;
        }
        th, td {
            padding: 8px;
            text-align: left;
        }
        caption {
            caption-side: top;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <table>
        <caption>员工信息表</caption>
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>职业</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>28</td>
                <td>工程师</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>35</td>
                <td>设计师</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="2">总计人数</td>
                <td>2</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>
效果展示

上述代码将创建一个包含表头、表体和表尾的表格。表格具有黑色边框,单元格内容左对齐,并有一定的内边距。表头使用加粗字体,表格标题位于表格顶部。

讲解
  • 表格标题(<caption>:使用<caption>标签为表格添加标题,有助于理解表格内容。
  • 表头(<thead><thead>标签内包含表格的列标题,使用<th>标签定义每个标题单元格。
  • 表体(<tbody><tbody>标签内包含表格的主体数据,使用<tr><td>标签定义数据行和单元格。
  • 表尾(<tfoot><tfoot>标签用于表格的总结行,如总计人数或平均值。
  • CSS样式(<style>:CSS样式用于设置表格的外观,如边框、内边距和文本对齐方式。

表格的样式设计

CSS提供了多种方式来美化表格,增强其视觉效果和用户体验。

  • 边框样式:使用border属性为表格添加边框,border-collapse属性控制边框合并。
  • 背景色:为表格的头部、主体或脚部设置不同的背景色。
  • 文本样式:使用font系列属性调整表格内文本的字体、大小和颜色。
示例代码:表格样式设计
<style>
    table {
        width: 100%;
        border-collapse: collapse; /* 边框合并 */
    }
    th, td {
        border: 1px solid #ddd; /* 单元格边框 */
        padding: 15px; /* 单元格内边距 */
        text-align: left; /* 文本左对齐 */
    }
    th {
        background-color: #4CAF50; /* 表头背景色 */
        color: white; /* 表头文本颜色 */
    }
    tr:nth-child(even) {
        background-color: #f2f2f2; /* 偶数行背景色 */
    }
    tr:hover {
        background-color: #ddd; /* 鼠标悬浮行背景色 */
    }
</style>

表格的布局控制

控制表格的布局对于确保数据的可读性和表格的整体美观至关重要。

  • 列宽:使用width属性为表格列设置固定的宽度,或使用min-widthmax-width属性控制列宽的最小和最大宽度。
  • 行高:通过heightline-height属性控制行高。
  • 单元格间距:使用padding属性调整单元格内容与边框之间的间距。
示例代码:表格布局控制
<style>
    table {
        table-layout: fixed; /* 固定表格布局 */
    }
    td, th {
        width: 33.33%; /* 均匀分配列宽 */
        padding: 10px; /* 单元格内边距 */
    }
    /* 为特定列设置固定宽度 */
    .first-column {
        width: 150px;
    }
    .last-column {
        width: auto;
    }
</style>

效果展示:

通过CSS样式设计和布局控制,HTML表格不仅可以提供清晰的数据展示,还能成为网页上的美观元素。

跨行和跨列

跨行和跨列是表格设计中常用的技术,用于合并单元格,使表格布局更加灵活和紧凑。

  • rowspan属性:允许一个单元格横跨多行。
  • colspan属性:允许一个单元格横跨多列。
示例代码:跨行和跨列
<tr>
    <th rowspan="2">姓名</th>
    <th colspan="2">联系方式</th>
</tr>
<tr>
    <td>张三</td>
    <td>1234567890</td>
    <td>0987654321</td>
</tr>

效果展示:

表格的可访问性

可访问性是表格设计中的重要考虑因素,特别是对于视力障碍用户。通过使用适当的属性和技巧,我们可以提高表格的可访问性。

  • scope属性:为<th>元素提供范围信息,表明单元格是行标题、列标题或两者都是。
  • aria属性:提供额外的可访问性信息,如aria-labelaria-labelledby等。
示例代码:表格可访问性
<table aria-describedby="employeeTable">
    <caption id="employeeCaption">员工信息表</caption>
    <thead>
        <tr>
            <th scope="col">姓名</th>
            <th scope="col">年龄</th>
            <th scope="col">职业</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">张三</th>
            <td>28</td>
            <td>工程师</td>
        </tr>
        <tr>
            <th scope="row">李四</th>
            <td>35</td>
            <td>设计师</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="2" aria-label="总计人数">总计人数</td>
            <td>2</td>
        </tr>
    </tfoot>
</table>

效果展示:

跨行和跨列功能以及可访问性设计是HTML表格中的重要特性。通过合理使用rowspancolspanscope属性,以及aria属性,可以创建出既灵活又易于访问的表格。

响应式表格设计

响应式表格设计确保表格在不同设备和屏幕尺寸上都能保持良好的展示效果。

  • 使用CSS媒体查询:根据不同屏幕尺寸应用不同的样式规则。
  • 使用百分比宽度:为表格和单元格设置百分比宽度,使表格能够灵活适应容器宽度。
  • 隐藏或重新排序列:在小屏幕上隐藏不必要的列或重新排序列,以优化阅读体验。
示例代码:响应式表格
<style>
    /* 基本样式 */
    table {
        width: 100%;
        border-collapse: collapse;
    }
    th, td {
        border: 1px solid #ddd;
        padding: 8px;
        text-align: left;
    }

    /* 响应式设计 */
    @media (max-width: 600px) {
        table, thead, tbody, th, td, tr {
            display: block;
        }
        thead tr {
            position: absolute;
            top: -9999px;
            left: -9999px;
        }
        tr {
            margin: 0 0 1rem 0;
        }
        td {
            border: none;
            position: relative;
            padding-left: 50%;
            text-align: right;
        }
        td:before {
            content: attr(data-label);
            position: absolute;
            left: 0;
            width: 45%;
            padding-left: 15px;
            font-weight: bold;
            text-align: left;
        }
    }
</style>

<table>
    <caption>响应式员工信息表</caption>
    <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>职业</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td data-label="姓名">张三</td>
            <td data-label="年龄">28</td>
            <td data-label="职业">工程师</td>
        </tr>
        <!-- 更多行 -->
    </tbody>
</table>

效果展示:

JavaScript与表格交互

JavaScript可以用于增强表格的交互性,例如实现排序和筛选功能。

  • 排序:通过JavaScript监听表格头部的点击事件,然后根据点击的列对表格数据进行排序。
  • 筛选:允许用户输入筛选条件,然后根据条件过滤表格数据。
示例代码:JavaScript排序
<script>
    function sortTable(columnIndex) {
        var table, rows, switching, i, x, y, shouldSwitch;
        table = document.getElementById("myTable");
        switching = true;
        while (switching) {
            switching = false;
            rows = table.rows;
            for (i = 1; i < (rows.length - 1); i++) {
                shouldSwitch = false;
                x = rows[i].getElementsByTagName("TD")[columnIndex];
                y = rows[i + 1].getElementsByTagName("TD")[columnIndex];
                if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
                    shouldSwitch = true;
                    break;
                }
            }
            if (shouldSwitch) {
                rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
                switching = true;
            }
        }
    }
</script>

<table id="myTable">
    <!-- 表格内容 -->
</table>

响应式表格设计和JavaScript交互性增强是提升用户体验的关键技术。通过使用CSS媒体查询和JavaScript,开发者可以创建出既美观又实用的表格,确保用户在任何设备上都能获得良好的浏览体验。

 给大家推荐一款可以快速构建响应式表格的工具

开源免费下载:yduibuilder: 快速开发UI界面,原型设计即前端开发

YDUIbuilder:拖拽式开发,极速构建响应式表格。利用直观的拖拽界面,快速设置列宽、行高,实现跨行跨列布局。内置CSS样式编辑器,一键美化表格,确保在任何设备上均呈现完美视图。排序、筛选等JavaScript交互功能,简单配置即刻实现。完成设计后,免费下载代码,进一步定制或直接部署。

YDUIbuilder开源免费低代码平台视频案列演示:
<iframe allowfullscreen="true" data-mediaembed="csdn" frameborder="0" id="c5zVPc5A-1718850702288" src="https://live.csdn.net/v/embed/400649"></iframe>

YDBUilder可视化开发前端界面之懂车帝小程序 首页界面

标签:指南,表格,单元格,width,HTML,table,border
From: https://blog.csdn.net/libol/article/details/139824106

相关文章

  • 二、浅谈 HTML
    1.什么是HTML:HTML称为超文本标记语言,是一种用于描述网页的语言,主要由一系列的标签构成。HTML的本质就是文本,但是它需要通过浏览器进行解释并渲染。2.HTML元素:HTML文档最基本的构成是HTML元素,它是使用标签来表现的。HTML元素分为三种类型:块状元素、内联元......
  • 关于excel表格的一些相关公式及函数
    Excel中的公式和函数是进行数据处理和分析的核心。以下是一些常用的Excel公式和函数,它们在各种场景中有广泛的应用:1.**文本处理函数**  -`LEN(text)`:返回文本字符串中的字符数。  -`TEXT(value,[format])`:将数值转换为指定格式的文本。  -`TRIM(text)`:......
  • js 如何解析带有html标签的内容
    在JavaScript中解析带有HTML标签的内容,通常是为了提取信息或转换HTML结构为可操作的对象。以下几种方式可以实现:1.使用DOMParser        如果想将HTML字符串解析成DOM节点以便进一步操作(比如查询、修改等),可以使用DOMParser。这是一个非常强大的工具,特别是在处理复......
  • Chromium 调试指南2024 Mac篇 - 准备工作 (一)
    1.引言Chromium是一个由Google主导开发的开源浏览器项目,它为GoogleChrome浏览器提供了基础框架。Chromium不仅是研究和开发现代浏览器技术的重要平台,还为众多其他基于Chromium的浏览器(如MicrosoftEdge、Brave等)提供了基础。调试Chromium对于开发人员来说是一个至关重要的技......
  • Chromium 开发指南2024 Mac篇-编译前的准备工作(一)
    1.引言Chromium是一款开源的网页浏览器项目,作为GoogleChrome浏览器的基础,其卓越的性能和广泛的应用使其成为众多开发者研究和学习的对象。对于希望深入了解浏览器内核,或是计划在Chromium基础上开发自定义浏览器的开发者来说,掌握Chromium的编译和开发流程是至关重要的......
  • 学生个人html静态网页制作 基于HTML+CSS+JavaScript+jquery仿苏宁易购官网商城模板
    ......
  • 山东菏泽家乡网页代码 html静态网页设计制作 dw静态网页成品模板素材网页 web前端网页
    ......
  • 独家|GenAI年中回顾,2024网络内容审核的API实战指南
    GenAI,即生成式人工智能,正在不断推动各个领域的创新和发展。一、年中回顾2024年被称为视频生成技术的爆发之年,各类GenAI在全球范围引领了一波又一波的潮流,真称得上是神仙打架。让我们共同回顾2024上半年的GenAI有哪些主要表现,并讨论,大量AI生成内容的涌现,又对互联网内......
  • HTML(13)——显示模式
    显示模式:标签的显示方式作用:布局网页时,根据标签的显示模式选择合适的标签摆放内容显示模式块级元素独占一行宽度默认为父级的100%添加宽高属性生效行内元素 一行可以显示多个设置宽高属性不生效宽高尺寸由内容撑开行内块元素一行可以显示多个设置宽高属性生效宽高尺寸......
  • 初学者学习AI大模型必看指南,一文尽览大模型知识点!绝对干货!!!
    一、什么是大模型?当我们提及大模型时,通常指的是大语言模型(LargeLanguageModel,简称LLM),即文字问答模型,其典型代表便是OpenAI的GPT系列。然而,随着技术的日新月异,大模型已经不单单局限于自然语言处理(NaturalLanguageProcessing)领域的发光发热,而是逐渐渗透到了其他多个领域......