首页 > 其他分享 >HTML-语义化标签和表格标签

HTML-语义化标签和表格标签

时间:2022-11-12 16:33:40浏览次数:47  
标签:定义 表格 标签 单元格 语义 HTML

语义化标签

语义化标签定义:html5中为了提高程序的可读性 提供了一些标签

1.<header>

2.<footer>

 HTML5代码

<header></header>
<footer></footer>

表格标签

  • table:定义表格
    • width:宽度
    • border:边框
    • cellpadding:定义内容和单元格的距离
    • cellspacing:定义单元格之间的距离 如果指定为0 则单元格的线回合为一条
    • bgcolor:背景色
    • align:对齐方式  
  • tr:定义行
    • bgcolor:背景色
    • align:对齐方式
  • td:定义单元格
    • colspan:合并列
    • rowspan:合并行  
  • th:定义表头单元格

 HTML代码

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>表格标签</title>
    </head>
    <body>
        <table border="1" width="50%" cellpadding="9" cellspacing="0" bgcolor="darkmagenta" align="center">
            <tr>
                <!-- <td>编号</td>
                <td>姓名</td>
                <td>成绩</td> -->
                <th>编号</th>
                <th>姓名</th>
                <th>成绩</th>
            </tr>
            
            <tr>
                <td>1</td>
                <td>张三</td>
                <td>46</td>
            </tr>
            
            <tr>
                <td>2</td>
                <td>李四</td>
                <td>78</td>
            </tr>
        </table>
        
    </body>
</html>
复制代码

运行结果

  •  <cation>:表格标题
  • <thead>:表示表格的头部分
  • <tbody>:表示表格的体部分
  • <tfoot>:表示表格的脚部分

HTML代码

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>表格标签</title>
    </head>
    <body>
        <table border="1" width="50%" cellpadding="9" cellspacing="0" bgcolor="darkmagenta" align="center">
            <thead>
                <caption>学生表</caption>

                <tr>
                    <!-- <td>编号</td>
                    <td>姓名</td>
                    <td>成绩</td> -->
                    <th>编号</th>
                    <th>姓名</th>
                    <th>成绩</th>
                </tr>
            </thead>
            
            <tbody>
                <tr bgcolor="blue" align="center">
                    <td>1</td>
                    <td>张三</td>
                    <td>46</td>
                </tr>
            </tbody>

            <tfoot>
                <tr>
                    <td>2</td>
                    <td>李四</td>
                    <td>78</td>
                </tr>
            </tfoot>
        </table>
    </body>
</html>
复制代码

运行结果

标签:定义,表格,标签,单元格,语义,HTML
From: https://www.cnblogs.com/shenziyi/p/16884048.html

相关文章

  • HTML-链表标签和块标签
    链表标签a:定义一个超链接属性:href:指定访问资源的URL(统一资源定位符)target:指定打开资源的方式_self:默认值,在当前页面打开_blank:在空白页面打开......
  • HTML
    前端开发目的:开发一个平台(网站) -前端开发:HTML、CSS、JavaScript -Web框架:接收请求并处理 -MySQL数据库:存储数据的地方快速上手: 基于FlaskWeb框架让你快速搭建一......
  • HTML标签-图片标签和列表标签
    HTML标签-图片标签图片标签:img:展示图片属性:src:指定图片的位置代码案例:  HTML标签列表标签案例:旅游网站首页1、确定使用table来完成布局2、如果某一行只有一......
  • 原生 HTML + CSS + JavaScript 写时钟
    时钟效果目录结构HTML代码<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge">......
  • 使用python保存网页时print能显示正常,html打开中文乱码问题
             ......
  • HTML标签-文件标签和文本标签1和文本标签2
    HTML标签-文件标签文件标签:构成html最基本的标签html:html文档的根标签head:头标签。用于指定html文档的一些属性。引入外部的资源title:标题标签body:体标签<!DOCTYPEh......
  • HTML概念介绍和快速入门
    HTML概念介绍概念:是最基础的网页开发语言HaperTextMarkupLanguage超文本标记语言超文本:超文本是用超链接的方式,将各种不同空间的文字信息组织在一起的网状文......
  • node07_自定义一个html转义模块
    在日常开发的过程中除了转换时间之外,我们可能还会遇到需要将html代码转义成文本,以及将文本转义成html的需求,下面我们来自定义一个转义的模块。具体的思路就是使用正则表达......
  • HTML5(笔记)
    1.基础1.HTML标题通过至2.段落用标签定义3.链接通过定义例如:<ahref="http://www.runoob,com">这是一个链接</a>4.图像标签<img>eg:<imgsrc="/images/logo.png"w......
  • noscript——一个被忽视的标签
    noscript是一个被很多人忽视的标签,但他能发挥很大的作用。noscript元素用来定义在脚本未被执行时的替代内容(文本)。此标签可被用于可识别标签但无法支持其中的脚本的浏览......