1.<table>表签

  • <table>...</table>标签用于在html文档中后创建表格。它包含表名和表格本身内容的代码。

2.<tr>标签

  • <tr>标签用于定义每一行

3.<td>标签

  • <td>标签用于定义每一列

4.使用<th>元素添加表头

  • 表头一般位于表格的第一行第一列,其文本加粗居中显示,就类似于课程表上的第一行日期的显示,而表头的设置也很简单,只需要<th></th>替代<td></td>即可。

5.单元格跨行和跨列

  • 绘制表格时,我们常需要合并单元格,而在HTML中提供了colspan(合并行)和rowspan(合并列)属性来啊帮助我们实现这一效果。colspan又称跨列,rowspan又称跨行.

6.复杂的表格结构

  • 在使用表格进行布局时,可以将表格划分为头捕、主体和页脚,具体如下所示:

    • <thead></thead>:用于定义表格的头部,一般包含网页的logo和导航等头部信息,位于<table></table>之中
    • <tfoot></tfoot>:用于定义表格的页脚,一般包含网页底部的企业信息,地址联系方式等,位于<table></table>标记之中,<thead></thead>标记之后
    • <tbody></tbody>:用于定义表格中的主体,一般包含网页中除头部和底部之外的其他内容,位于<table></table>标记之中,<tfoot></tfoot>标记之后。
  • 注:现在很多布局都是采用div+css的方式,如果大家对table布局感兴趣的化,可以直接搜索“搜狐股票”,然后点击F12查看源代码。

html表格基本标签的更多相关文章

  1. HTML——表格table标签,tr或者td

    表格定义和用法 <tr> 标签定义 HTML 表格中的行. tr 元素包含一个或多个 th 或 td 元素. HTML 与 XHTML 之间的差异 在 HTML 4.01 中,tr 元素的 ...

  2. js实现html表格<td>标签中带换行的文本显示出换行效果

    遇见问题 如下内容中我写了几行,但是表格中并未按行显示,换行符反而变成了空格,于是想自己转换下 思考问题 1.可以看到表格的内容是后端传来的数据,于是想直接在后端转换下,把换行符替换成<br&g ...

  3. day63-html-列表,表格,标签的嵌套规则

    1.列表 1.无序列表 <ul type="disc"> <li>a</li> <li>b</li> </ul&g ...

  4. HTML中表格table标签的实例

    一.表格有边框,第一行居中对齐 二.表格没有边框 三.表格有水平标题 四.表格有垂直标题 五.合并行单元格 colspan合并单元格 六.表格有单元格边距(内边距) 七.表格没有单元格间距 八.表格有 ...

  5. 表格td标签在不添加多余标签的情况下实现文本内容单行显示,多余部分省略号表示的方法

    #table { table-layout: fixed; } .content { white-space: nowrap; text-overflow: ellipsis; -o-text-ove ...

  6. 在IE6/7下表格td标签没有内容时不显示边框?

    有以下几种方法: 1.在单元格中加入一个空格.这样: <td> </td> 2.直接在table里这样写:<table border="0" cell ...

  7. HTML 表格 各标签使用的标准顺序(心得)

    <table>   <caption>标题</caption>     <colground>     <col>     <col& ...

  8. HTML常用标签与表格标签

    超链接标签: <a href="超链接地址" target="_blank">超链接的文字</a> _blank或new是在新网页中打开 ...

  9. html系列教程--span style 及表格标签 title video

    <span> 标签:非块状元素,用于文本描述 <style> 标签:内联样式表标签定义样式信息,必须写明type类型为text/css,建议写在head中,不是必须 demo: ...

  10. HTML表格标签的使用-&lt;table&gt;

    <html> <head> <title> 表格标签 </title> <!-- 标签名:table 定义一个表格 子标签:<caption ...

随机推荐

  1. AutoCAD二次开发系列教程01-如何在AutoCAD中输出Hello World

    目录 01项目环境准备 02代码示例 03输出示例 04总结 05源码地址 01项目环境准备 A.开发使用的软件:AutoCAD2016.VisualStudio2022 B.建立依赖的本地库(提前从 ...

  2. #Powerbi 利用视觉对象着色地图,制作数据地图

    日常工作中,有时我们会遇到需要地图来展示我们的数据场景,利用POWERBI,我们可以快速的制作自己的业务地图. Powerbi自带了三大地图,今天我们用到的是形状地图. 步骤讲解: 第一步:下载对应的 ...

  3. 基于ORB-SLAM3库搭建SLAM系统

    参考资料 ORB-SLAM3配置及安装教程 ORB-SLAM3配置安装及运行 环境配置 Win 11pro VMware 17Pro Ubuntu 18.04 Eigen3 Pangolin Open ...

  4. 文心一言 VS chatgpt (3)-- 算法导论2.1

    一.以图 2-2 为模型,说明INSERTION-SORT 在数组 A=(31,41,59,26,41,58)上的执行过程. 文心一言: 以图 2-2 为模型,说明INSERTION-SORT 在数组 ...

  5. 2021-12-22:回文子串。 给你一个字符串 s ,请你统计并返回这个字符串中 回文子串 的数目。 回文字符串 是正着读和倒过来读一样的字符串。 子字符串 是字符串中的由连续字符组成的一个序列。

    2021-12-22:回文子串. 给你一个字符串 s ,请你统计并返回这个字符串中 回文子串 的数目. 回文字符串 是正着读和倒过来读一样的字符串. 子字符串 是字符串中的由连续字符组成的一个序列. ...

  6. 聊一聊 Python 安装中的 --enable-shared

    由于微信不允许外部链接,你需要点击文章尾部左下角的 "阅读原文",才能访问文中链接. 今天在 CentOS 7.4 使用源码编译安装 Python-2.7.15 的时候,发现了一个 ...

  7. 2023年最新sentinel-dashbord部署安装(保姆级别)

    目录 Sentinel-dashboard安装下载 前景提要 一. 构建环境 二.下载安装与配置 1.进入百度搜索:Sentinel 或访问地址:面向云原生微服务的高可用流控防护组件 2.进入git主 ...

  8. WPF 入门笔记 - 03 - 样式基础

    程序的本质 - 数据结构 + 算法 本篇为学习李应保老师所著的<WPF专业编程指南>并搭配WPF开发圣经<WPF编程宝典第4版>以及痕迹大佬<WPF入门基础教程系列> ...

  9. 从RDD创建DataFrame

    0.前次作业:从文件创建DataFrame 1.pandas df 与 spark df的相互转换     df_s=spark.createDataFrame(df_p)     df_p=df_s ...

  10. 基于C语言的泛类型循环队列

    循环队列多用于通信数据缓存中,尤其是在双方设备接收数据与处理数据不同步的情况下,使用循环队列先缓存通信数据,然后按照时间戳数据出队作出相应的处理,是一种比较合适的做法,在嵌入式编程中亦是如此.使用循环 ...