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. day07-优惠券秒杀03

    功能03-优惠券秒杀03 4.功能03-优惠券秒杀 4.6Redisson的分布式锁 Redis分布式锁-Redisson+RLock可重入锁实现篇 4.6.1基于setnx实现的分布式锁问题 我们在 ...

  2. WPF Button MouseDown事件

    Button的MouseDown事件 WPF的Button控件,鼠标点击时,MouseDown事件没有触发. 经确认,Button的MouseDown被内部处理了.下面是基类ButtonBase的部分 ...

  3. 飞行时间技术TOF

    文章目录 飞行时间技术TOF 一. 光速的测定 二. 各种TOF技术 直接脉冲TOF 脉冲间接TOF 连续波调制TOF(Continous Wave TOF) 三. TOF技术的应用 飞行时间技术TO ...

  4. AGC061 F Perfect String

    毒瘤出题人,史诗加强 AGC 的 F-- 然而我连原题都不会,所以只学了原题做法. 翻译一下题意就是给定一张循环网格图,求经过 \((0,0)\) 的闭合回路条数. 由于网格图中每一个位置都等价,所以 ...

  5. JavaScript封装大全

    JavaScript封装大全-持续更新 Ajax封装 // 使用该封装需注意 // Ajax(method(默认GET), url(网址 必传), success(res){(成功时数据处理函数 必传 ...

  6. 2022-04-24:用go语言重写ffmpeg的muxing.c示例。

    2022-04-24:用go语言重写ffmpeg的muxing.c示例. 答案2022-04-24: 本程序的大体过程如下: 打开输出文件并写入头部信息. 添加音频和视频流,并为每个流创建 AVCod ...

  7. 2021-02-19:给定一个二维数组matrix,一个人必须从左上角出发,最后到达右下角。沿途只可以向下或者向右走,沿途的数字都累加就是距离累加和。请问最小距离累加和是多少?

    2021-02-19:给定一个二维数组matrix,一个人必须从左上角出发,最后到达右下角.沿途只可以向下或者向右走,沿途的数字都累加就是距离累加和.请问最小距离累加和是多少? 福哥答案2021-02 ...

  8. 2022-03-22:二进制取反。 有一个二进制字符串,可以选择该串中的任意一段区间进行取反(可以进行一次或不进行),取反指将0变为1,将1变为0。那么取反之后的num可能的最大的字典序是多少呢。如有

    2022-03-22:二进制取反. 有一个二进制字符串,可以选择该串中的任意一段区间进行取反(可以进行一次或不进行),取反指将0变为1,将1变为0.那么取反之后的num可能的最大的字典序是多少呢.如有 ...

  9. 解决:Invalid HTTP_HOST header: '192.168.56.1:8001'. You may need to add '192.168.56.1' to ALLOWED_HOSTS.

    在setting.py下的ALLOWED_HOSTS=['*']添加'*'就可以解决显示不出来的问题.

  10. ESLint: Expected a space before ‘/&gt;‘, but not found. (vue/html-closing-bracket-spacing)

    文件->设置->编辑器->代码样式->HTML->其他-->在空的标签(打钩)