HTML表格

  • HTML表格:

HTML表格是由<table>标签来定义。HTML表格式一种用于结构化数据的标记语言元素。每个表格均有若干行(由<tr>B标签定义),每行被分割为做干列(由<td>标签定义)。表格可以包含标题行(由<th>定义列的标题)。

tr:tr 是 table row 的缩写,表示表格的一行。

td:td 是 table data 的缩写,表示表格的数据单元格。

th:th 是 table header的缩写,表示表格的表头单元格

数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格。

<table>
  <thead>
    <tr>
      <th>列标题1</th>
      <th>列标题2</th>
      <th>列标题3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>行1,列1</td>
      <td>行1,列2</td>
      <td>行1,列3</td>
    </tr>
    <tr>
      <td>行2,列1</td>
      <td>行2,列2</td>
      <td>行2,列3</td>
    </tr>
  </tbody>
</table>

<table>元素表示整个表格,它包含两个主要部分:<thead>、<tbody>:

<thead > 用于定义表格的标题部分: 在 <thead > 中,使用 <th > 元素定义列的标题。

<tbody > 用于定义表格的主体部分: 在 <tbody > 中,使用 <tr > 元素定义行,并在每行中使用 <td > 元素定义单元格数据

1)、HTML表格和边框属性:

<table border="1">

  <tr>

<td>Row 1, cell 1</td>

<td>Row 1, cell 2</td>

</tr>

</table>

2)、HTML表格表头:

<table border="1">

  <tr>

<th>Header 1</th>

<th>Header 2</th>

</tr>

<tr>

<td>row 1, cell 1</td>

<td>row 1, cell 2</td>

</tr>

<tr>

<td>row 2, cell 1</td>

<td>row 2, cell 2</td>

</tr>

</table>

3)、HTML表格跨行或跨列:

<table border="1">

<tr>

  <th>Name</th>

  <th colspan="2">Telephone</th>

</tr>

<tr>

  <td>Bill Gates</td>

  <td>555 77 854</td>

  <td>555 77 855</td>

</tr>

</table>

<table border="1">

<tr>

  <th>First Name:</th>

  <td>Bill Gates</td>

</tr>

<tr>

  <th rowspan="2">Telephone:</th>

  <td>555 77 854</td>

</tr>

<tr>

  <td>555 77 855</td>

</tr>

</table>

4)、HTML表格嵌套:

<table border="1">

<tr>

  <td>

   <p>这是一个段落</p>

   <p>这是另一个段落</p>

  </td>

  <td>这个单元格包含一个表格:

   <table border="1">

   <tr>

     <td>A</td>

     <td>B</td>

   </tr>

   <tr>

     <td>C</td>

     <td>D</td>

   </tr>

   </table>

  </td>

</tr>

<tr>

  <td>这个单元格包含一个列表

   <ul>

    <li>apples</li>

    <li>bananas</li>

    <li>pineapples</li>

   </ul>

  </td>

  <td>HELLO</td>

</tr>

</table>

5)、HTML表格边距:

<table border="1"

cellpadding="10">

<tr>

  <td>First</td>

  <td>Row</td>

</tr>   

<tr>

  <td>Second</td>

  <td>Row</td>

</tr>

</table>

6)、HTML表格间距:

<table border="1" cellspacing="10">

<tr>

  <td>First</td>

  <td>Row</td>

</tr>

<tr>

  <td>Second</td>

  <td>Row</td>

</tr>

</table>

7)、HTML表格标签:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/177427.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

第22期 | GPTSecurity周报

GPTSecurity是一个涵盖了前沿学术研究和实践经验分享的社区&#xff0c;集成了生成预训练 Transformer&#xff08;GPT&#xff09;、人工智能生成内容&#xff08;AIGC&#xff09;以及大型语言模型&#xff08;LLM&#xff09;等安全领域应用的知识。在这里&#xff0c;您可以…

Java架构师知识产权与标准化

目录 1 导学2 知识产权概述3 保护期限4 知识产权人的确定4 侵权判断5 标准划分想学习架构师构建流程请跳转:Java架构师系统架构设计 1 导学 2 知识产权概述 知识产权是指公民、法人、非法人单位对自己的创造性智力成果和其他科技成果依法享有的民事权。是智力成果的创造人依…

Web渗透编程语言基础

Web渗透初学者JavaScript专栏汇总-CSDN博客 Web渗透Java初学者文章汇总-CSDN博客 一 Web渗透PHP语言基础 PHP 教程 | 菜鸟教程 (runoob.com) 一 PHP 语言的介绍 PHP是一种开源的服务器端脚本语言,它被广泛用于Web开发领域。PHP可以与HTML结合使用,创建动态网页。 PHP的特…

vue3中,使用html2canvas截图包含视频、图片、文字的区域

需求&#xff1a;将页面中指定区域进行截图&#xff0c;区域中包含了图片、文字、视频。 第一步&#xff0c;先安装 npm install html2canvas第二步&#xff0c;在页面引入&#xff1a; import html2canvas from html2canvas;第三步&#xff0c;页面使用&#xff1a; 1&…

【OpenCV实现图像:用Python生成图像特效,报错ValueError: too many values to unpack (expected 3)】

文章目录 概要读入图像改变单个通道黑白特效颜色反转将图像拆分成四个子部分 概要 Python是一种功能强大的编程语言&#xff0c;也是图像处理领域中常用的工具之一。通过使用Python的图像处理库&#xff08;例如Pillow、OpenCV等&#xff09;&#xff0c;开发者可以实现各种各…

纳米银线 纳米银纳米线 平均直径: 50-100nm

&#xff08;西&#xff09;纳米银线 &#xff08;安&#xff09;含量&#xff08;%&#xff09;&#xff1a;99.9 &#xff08;瑞&#xff09;平均直径: 50-100nm &#xff08;20nm 30nm 60nm &#xff09; &#xff08;禧&#xff09;长度&#xff1a;10um …

龙迅视频转换IC LT6711GX适用于HDMI2.1转TPYE-C/DP1.4/EDP功能应用

1.描述 应用功能&#xff1a;LT6711GX适用于HDMI2.1转TPYE-C/DP1.4/EDP 分辨率&#xff1a;最高支持8K30HZ或8K60Hz压缩数据 工作温度范围&#xff1a;−40C to 85C 产品封装&#xff1a;QFN88 &#xff08;10*10&#xff09; 最小包装量&#xff1a;1680PCS 2.产品应用市场 •…

Spring面试题:(二)基于xml方式的Spring配置

xml配置Bean的常见属性 id属性 name属性 scope属性 lazy-init属性 init-method属性和destroy属性 initializingBean方法 Bean实例化方式 ApplicationContext底层调用BeanFactory创建Bean&#xff0c;BeanFactory可以利用反射机制调用构造方法实例化Bean&#xff0c;也可采用工…

jeecg-uniapp 杂七杂八数据

uniapp 点击事件 tap: 单击事件 confirm: 回车事件 blur:失去焦点事件 touchstart: 触摸开始事件 touchmove: 触摸移动事件。 touchend: 触摸结束事件。 longpress: 长按事件。 input: 输入框内容变化事件。 change: 表单元素值变化事件。 submit: 表单提交事件。 scroll: 滚动…

MySQL笔记--SQL语句

目录 1--SQL的通用语法 2--SQL语句的分类 3--DDL语句 3-1--数据库操作 3-2--表操作 3-3--数据类型 3-4--修改和删除 4--DML语句 4-1--插入数据 4-2--修改数据 4-3--删除数据 5--DQL语句 5-1--基本查询 5-2--条件查询 5-3--聚合函数 5-4--分组查询 5-5--排序查…

javaEE -13(6000字CSS入门级教程 - 2)

一&#xff1a;Chrome 调试工具 – 查看 CSS 属性 首先打开浏览器&#xff0c;接着有两种方式可以打开 Chrome 调试工具 直接按 F12 键鼠标右键页面 > 检查元素 点开检查即可 标签页含义&#xff1a; elements 查看标签结构console 查看控制台source 查看源码断点调试ne…

幂等性设计,及案例分析

一、redis锁处理幂等性失效 上面代码中&#xff0c;锁起不了作用&#xff1b; ——count方法&#xff0c;和insert方法在同一事务中&#xff0c;事务中包含锁&#xff0c;锁没有作用&#xff0c;锁的范围内&#xff0c;事务没提交&#xff0c;但释放锁后&#xff0c;事务提交前…

unity 点击3D物体

1. 在场景中添加事件系统 2. 为主相机添加射线检测 3. 为物体挂载以下脚本&#xff0c;物体必须带碰撞体 using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.EventSystems;// 挂在物体上&#xff0c;需要添加碰撞体 public …

Qt中实现页面切换的两种方式

文章目录 方式一 &#xff1a;使用QStackedWidget讲解代码结构main.cpp完整代码运行结果&#xff1a; 方式二 &#xff1a;代码结构完整代码mainwindow.hnewmainwindow.hmain.cppmainwindow.cppnewmainwindow.cppmainwindow.uinewmainwindow.ui 效果 方式一 &#xff1a;使用QS…

mathematica解非齐次常微分方程通用写法。解RC微分方程,输入硬写为Cos,通用写法:将微分方程的解函数表达式转为mathematica的纯函数

输入电压为余弦信号, mathematica解微分方程举例&#xff08;mathematica解非齐次常微分方程通用写法&#xff09;

天津重点大数据培训 大数据培训的三个重要内容

随着互联网的发展和技术的进步&#xff0c;大数据的应用范围越来越广泛&#xff0c;对于企业和个人来说&#xff0c;学习和掌握大数据技术已经成为了必不可少的一项能力。大数据技术是当前和未来的发展方向&#xff0c;对于想进入互联网行业或从事相关技术工作的人来说&#xf…

android下的app性能测试应主要针对那些方面,如何开展?

如何开展安卓手机下的App性能测试&#xff0c;对于优秀的测试人员而言&#xff0c;除了要懂得性能测试的步骤流程外&#xff0c;还应该懂的性能测试的一些其他知识&#xff0c;比如性能测试指标、各指标的意义&#xff0c;常用的性能测试工具、如何查看结果分析等等知识。所以本…

ubuntu配置 Conda 更改默认环境路径

我的需求是以后凡是新建一个虚拟环境都需要安装在一个挂载了大容量的分区/data里面 /home里面的是即将爆满但是还能塞点东西的硬盘. 如果您想要永久更改 Conda 的默认环境路径&#xff0c;可以编辑 Conda 的配置文件。首先&#xff0c;找到 Conda 的配置文件通常是 .condarc 文…

idea插件(一)-- SequenceDiagram(UML自动生成工具)

目录 1. 安装 2. 默认快捷键 3. 操作说明 4. 导出为图片与UML类图 4.1 导出为图片&#xff1a; 4.2 导出 UML 类图 SequenceDiagram是从java、kotlin、scala&#xff08;Beta&#xff09;和groovy&#xff08;limited&#xff09;代码生成简单序列图&#xff08;UML&…

06 MIT线性代数-线性无关,基和维数Independence, basis, and dimension

1. 线性无关 Independence Suppose A is m by n with m<n (more unknowns than equations) Then there are nonzero solutions to Ax0 Reason: there will be free variables! A中具有至少一个自由变量&#xff0c;那么Ax0一定具有非零解。A的列向量可以线性组合得到零向…