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. Centos7.x 安装配置jdk与jmeter

    一.准备 1.jmeter(下载地址:https://jmeter.apache.org/download_jmeter.cgi) 2.jdk(下载地址:https://www.oracle.com/ ...

  2. 利用简单的IO操作实现M3U8文件之间的合并

    先上代码: 1 @SneakyThrows //合并操作,最终文件不包含结束标识,方便多次合并 2 private static void mergeM3U8File(String source, S ...

  3. ICML 2017-Model-Agnostic Meta-Learning for Fast Adaptation of Deep Networks

    Key Gradient Descent+TRPO+policy Gradient 训练模型的初始参数,模型在新任务上只需参数通过一个或多个用新任务的少量数据计算的梯度步骤更新后,就可以最大的性能.而 ...

  4. 记一次排查:接口返回值写入excel后,从单元格copy出来的数据会带有多重引号的问题

    在项目里刚好有3个服务,同一个网关内层的3个服务,两个php的,一个golang的,为了提高负载以及进行分流,部分客户的接口调用会被网关自动分配到go服务. 恰好为了测试,我写了一个全量用户的生产.测 ...

  5. python环境的安装与设置和oneforall的安装与使用

    下载python: https://www.python.org/downloads/windows/ 安装python 如果不需要修改路径,下面两个√打开后,点击上面的install now 也可以 ...

  6. 【Java】GridBagLayout布局笔记

    参考博客: 样例解释:https://blog.csdn.net/wstz_5461/article/details/78067176 参数解释:https://blog.csdn.net/shiSh ...

  7. pbootcms对接微信扫码登录代码核心片段和步骤(前后端)

    首先需要在微信公众平台或开放平台中创建应用,并获取到AppID和AppSecret. 在pbootcms中创建一个自定义模板页面(例如:wechat_login.html),并在该页面中添加以下代码, ...

  8. 如何让ChatGPT生成Midjourney提示词

    ​ 导读:最近AI绘画非常的火,今天我们看ChatGPT如何生成Midjourney提示词,让AI教AI做事. 本文字数:900,阅读时长大约:3分钟 正如 Midjourney 的官方网站报道的那样 ...

  9. GPT虚拟直播Demo系列(二)|无人直播间实现虚拟人回复粉丝

    摘要 虚拟人和数字人是人工智能技术在现实生活中的具体应用,它们可以为人们的生活和工作带来便利和创新.在直播间场景里,虚拟人和数字人可用于直播主播.智能客服.营销推广等.接入GPT的虚拟人像是加了超强b ...

  10. 【Python&RS】GDAL批量裁剪遥感影像/栅格数据

            GDAL(Geospatial Data Abstraction Library)是一个在X/MIT许可协议下的开源栅格空间数据转换库.它利用抽象数据模型来表达所支持的各种文件格式.它 ...