html表格

最新推荐文章于 2024-08-01 13:23:22 发布

yesteryou

最新推荐文章于 2024-08-01 13:23:22 发布

阅读量258

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML5 文章标签： html

本文链接：https://blog.youkuaiyun.com/yesteryou/article/details/70113276

HTML5 专栏收录该内容

11 篇文章

订阅专栏

本文详细介绍了HTML中表格和列表的创建方法及样式调整技巧，包括如何使用table、tbody、tr、th、td等标签创建表格，如何为表格添加边框和标题，以及如何创建有序和无序列表。

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

创建表格的四个元素：

table、tbody、tr、th、td

1、<table>…</table>：整个表格以<table>标记开始、</table>标记结束。
2、<tbody>…</tbody>：当表格内容非常多时，表格会下载一点显示一点，但如果加上<tbody>标签后，这个表格就要等表格内容全部下载完才会显示。如右侧代码编辑器中的代码。
3、<tr>…</tr>：表格的一行，所以有几对tr 表格就有几行。
4、<td>…</td>：表格的一个单元格，一行中包含几对<td>…</td>，说明一行中就有几列。
5、<th>…</th>：表格的头部的一个单元格，表格表头。
6、表格中列的个数，取决于一行中数据单元格的个数。

用css为表格添加边框

Table 表格在没有添加 css 样式之前，是没有边框的。
table tr td,th{border:1px solid #000;}
使用border属性添加边框.

caption标签，为表格添加标题和摘要

标题:

用以描述表格内容，标题的显示位置：表格上方。
表格还是需要添加一些标签进行优化，可以添加标题和摘要.
<table>
<caption>标题文本</caption>
<tr>
<td>…</td>
<td>…</td>
…
</tr>
…
</table>

摘要

摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化)，使搜索引擎更好的读懂表格内容，还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。
语法：<table summary=”表格简介文本”>

列表和表格

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8”>
<title>列表和表格</title>
<style>
ol{
/列表默认会有40px的内边距/
padding: 20px;

        /*设置列表样式*/
        /*list-style: none;*/

        /*设置列表样式的类型*/
        list-style: square;
    }

    table{
        border:1px solid gray;

        border-spacing: 5px;
        /*border-collapse:;*/
        border-collapse: collapse;

    }
    thead{
        background-color: gray;
    }

    td{
        border:1px solid gray;
        padding: 5px;  
        height: 2rem; 
        width: 4rem;     
    }

    th{
        height: 2rem;
    }

&lt;/style>

</head>
<body>
<h3>有序列表</h3>
<ol>
<li>HTML5</li>
<li>CSS3 </li>
<li>JavaScript</li>
<li>Python</li>
</ol>

&lt;ul>
    &lt;!--使用zen-Coding 神编码.安装Emmet插件-->
    &lt;li>aaa&lt;/li>
    &lt;li>bbb&lt;/li>
    &lt;li>ccc&lt;/li>
    &lt;li>ddd&lt;/li>

    &lt;!--(li>span)*3-->
    &lt;li>&lt;span>&lt;/span>&lt;/li>
    &lt;li>&lt;span>&lt;/span>&lt;/li>
    &lt;li>&lt;span>&lt;/span>&lt;/li>

    &lt;!--(li+span)*3-->
    &lt;li>&lt;/li>
    &lt;span>&lt;/span>
    &lt;li>&lt;/li>
    &lt;span>&lt;/span>
    &lt;li>&lt;/li>
    &lt;span>&lt;/span>

    &lt;h3>表格&lt;/h3>
    &lt;!--
        table用来定义一个表格,
        caption用来定义表格的标题.
        thead用来定义表格的表头
        th用来定义表头中每一格的信息
        tr代表往表格中插入一行
        td代表往行内插入列
        rowspan设置横跨n行
        colspan设置纵跨n列
    -->
    &lt;table>
        &lt;caption>标题&lt;/caption>

        &lt;thead>
            &lt;th>时间&lt;/th>
            &lt;th>周一&lt;/th>
            &lt;th>周二&lt;/th>
            &lt;th>周三&lt;/th>
            &lt;th>周四&lt;/th>
            &lt;th>周五&lt;/th>
            &lt;th>周六&lt;/th>
            &lt;th>周日&lt;/th>
        &lt;/thead>

        &lt;tr>
            &lt;td>上午&lt;/td>
            &lt;td>html5&lt;/td>
            &lt;td>html5&lt;/td>
            &lt;td>html5&lt;/td>
            &lt;td>html5&lt;/td>
            &lt;td>html5&lt;/td>
            &lt;td>html5&lt;/td>
            &lt;td>html5&lt;/td>
        &lt;/tr>

        &lt;tr>
            &lt;td>下午&lt;/td>
            &lt;td>html5&lt;/td>
            &lt;td>html5&lt;/td>
            &lt;td>html5&lt;/td>
            &lt;td>html5&lt;/td>
            &lt;td>html5&lt;/td>
            &lt;td>html5&lt;/td>
            &lt;td>html5&lt;/td>
        &lt;/tr>

        &lt;tr>
            &lt;td>晚上&lt;/td>
            &lt;td>html5&lt;/td>
            &lt;td>html5&lt;/td>
            &lt;td>html5&lt;/td>
            &lt;td>html5&lt;/td>
            &lt;td>html5&lt;/td>
            &lt;td>html5&lt;/td>
            &lt;td>html5&lt;/td>
        &lt;/tr>
    &lt;/table>

&lt;/ul>

</body>
</html>