Html与CSS基础知识篇（Html标签语法篇2）

最新推荐文章于 2024-06-19 12:50:25 发布

yyxhzdm

最新推荐文章于 2024-06-19 12:50:25 发布

阅读量240

点赞数

分类专栏： CSS的基础学习与开发文章标签： html

本文链接：https://blog.csdn.net/yyxhzdm/article/details/114853225

版权

前言：上章我们主要介绍Html中常用到的一些标签，最后我们提到了表格<table>标签，它默认显示没有表格线，但是我们常见到的都会有表格线的，那样既美观也实用。下面我们着重介绍一下CSS样式

用CSS样式，为表格加入边框

table表格在没有添加CSS样式之前，是没有边框的。这样不便于我们后期合并单元格知识的讲解，所有我们这一节我们为表格添加一些样式，为它添加边框。

在编译器中添加如下代码：

<head>
    <meta charset="UTF-8">
    <title>表格table</title>
    <style type="text/css">
        table tr td ,th {
            border: solid #000000;
        }
    </style>
</head>

上述代码是CSS样式代码，为th ，td单元格添加粗细为一个像素的黑色边框。

效果：

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

表格还需要添加一些标签进行优化，可以添加标题和摘要：

代码：

<table summary="这个表格主要是介绍某门店商品的库存情况">
    <caption>西安某某某商店</caption>
    <tr>
        <th>产品名称</th>
        <th>品牌</th>
        <th>库存量（个）</th>
        <th>入库时间</th>
    </tr>
    <tr>
        <td>手机</td>
        <td>oppo</td>
        <td>50</td>
        <td>2021-02-05</td>
    </tr>
    <tr>
        <td>笔记本电脑</td>
        <td>ThinkPad</td>
        <td>5</td>
        <td>2021-03-15</td>
    </tr>
    <tr>
        <td>U盘</td>
        <td>爱国者</td>
        <td>10000</td>
        <td>2020-12-24</td>
    </tr>
</table>

摘要

语法：<table summary="这个表格主要是介绍某门店商品的库存情况">

摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性，使搜索引擎更好的读懂表格内容，还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。

标题：

语法：<table>

<caption>西安某某某商店</caption>

。。。。

</tab

最低0.47元/天解锁文章

yyxhzdm

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
Html与CSS基础知识篇（Html标签语法篇2）

前言：上章我们主要介绍Html中常用到的一些标签，最后我们提到了表格<table>标签，它默认显示没有表格线，但是我们常见到的都会有表格线的，那样既美观也实用。下面我们着重介绍一下CSS样式用CSS样式，为表格加入边框table表格在没有添加CSS样式之前，是没有边框的。这样不便于我们后期合并单元格知识的讲解，所有我们这一节我们为表格添加一些样式，为它添加边框。在编译器中添加如下代码：<head> <meta charset="UTF-8">
复制链接

扫一扫