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. vue3.0

    https://www.yuque.com/gdnnth/vue-v3 http://www.liulongbin.top:8085/#/ https://www.yuque.com/woniuppp ...

  2. Marior去除边距和迭代内容矫正用于自然文档矫正

    一.简要介绍 本文简要介绍了论文" Marior: Margin Removal and Iterative Content Rectification for Document Dewar ...

  3. C# 信号锁SemaphoreSlim

    关于锁,我们经常会使用lock object对象,进行资源访问的限制. 但,lock是有限制的,无法添加异步方法.编译器会报错. 下面推荐另一个类SemaphoreSlim,这是信号量的一个使用类.先 ...

  4. wsl下的python环境管理

    开头 之前一直都在用python解释器和virtualenv来管理python的虚拟环境,但是被老大吐槽不好用之后,换了一种新的管理方式,那就是 pyenv + pyenv-virtualenv的使用 ...

  5. 2020-10-15:mysql的双1设置是什么?

    福哥答案2020-10-15:#福大大架构师每日一题# [答案来自知乎:](https://www.zhihu.com/question/425704691) 其实就是innodb_flush_log ...

  6. 2021-03-27:给你一个链表的头节点 head ,旋转链表,将链表每个节点向右移动 k 个位置。输入:head = 1→2→3→4→5, k = 2,输出:4→5→1→2→3。

    2021-03-27:给你一个链表的头节点 head ,旋转链表,将链表每个节点向右移动 k 个位置.输入:head = 1→2→3→4→5, k = 2,输出:4→5→1→2→3. 福大大 答案20 ...

  7. Django4全栈进阶之路8 createsuperuser创建超级管理员账号

    在 Django 4 中,可以使用 createsuperuser 命令来创建超级管理员账号.超级管理员拥有管理后台的所有权限,包括创建.编辑和删除用户.组.权限等操作. 下面是创建超级管理员账号的步 ...

  8. vue全家桶进阶之路41:Vue3 语法糖<script setup>

    <script setup> 是 Vue 3 中的一种语法糖,它可以使组件的脚本更加简洁.易读,并且减少了一些样板代码.使用 <script setup>,你可以将组件的 pr ...

  9. AcWing 1209. 带分数

    题目描述: 分析: 题意就是说给定一个整数N,求给定a,b,c,求a+b/c==N且a,b,c恰好包括0-9的答案的个数,需要注意的是,b/c可能得到的是小数,所以要尽量避免除法,将等式转换为乘法格式 ...

  10. Windows全能终端神器MobaXterm

    MobaXterm 又名 MobaXVT,是一款增强型终端.X 服务器和 Unix 命令集(GNU/ Cygwin)工具箱. MobaXterm 可以开启多个终端视窗,以最新的 X 服务器为基础的 X ...