表格——html

已于 2022-05-01 20:46:46 修改
阅读量703 收藏 1
点赞数
分类专栏： HTML+CSS 文章标签： css3
于 2022-04-14 22:49:54 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mantou_riji/article/details/124181964
版权

文章目录

表格的基本元素

使用table标签来创建一个表格。
tr标签表示表格中的一行
td标签表示表格中的一个单元格
eg：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <table border="1" width="50%" align="center">
      <tr>
        <td>A1</td>
        <td>B1</td>
        <td>C1</td>
        <td>D1</td>
      </tr>
      <tr>
        <td>A2</td>
        <td>B2</td>
        <td>C2</td>
        <td>D2</td>
      </tr>
      <tr>
        <td>A3</td>
        <td>B3</td>
        <td>C3</td>
        <td>D3</td>
      </tr>
      <tr>
        <td>A4</td>
        <td>B4</td>
        <td>C4</td>
        <td>D4</td>
      </tr>
    </table>
  </body>
</html>

在这里插入图片描述
border=1，意思就是给表格的每一格，及边框加上1像素的边框

横向合并colspan

使用格式：colspan = “合并个数”

纵向合并rowspan

使用格式：rowspan = “合并个数”

eg:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <table border="1" width="50%" align="center">
      <tr>
        <td>A1</td>
        <td>B1</td>
        <td colspan="2">C1</td>
      </tr>
      <tr>
        <td>A2</td>
        <td>B2</td>
        <td>C2</td>
        <td rowspan="3">D2</td>
      </tr>
      <tr>
        <td>A3</td>
        <td>B3</td>
        <td>C3</td>
      </tr>
      <tr>
        <td>A4</td>
        <td>B4</td>
        <td>C4</td>
      </tr>
    </table>
  </body>
</html>

在这里插入图片描述

长表格

可以将一个表格分成3个部分：
头部 thead
主体 tbody
底部 tfoot

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <table border="1" width="50%" align="center">
      <thead>
        <tr>
          <td>姓名</td>
          <td colspan="3">成绩</td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>A1</td>
          <td>B1</td>
          <td>C1</td>
          <td rowspan="4">D</td>
        </tr>
        <tr>
          <td>A2</td>
          <td>B2</td>
          <td>C2</td>
        </tr>
        <tr>
          <td>A3</td>
          <td>B3</td>
          <td>C3</td>
        </tr>
        <tr>
          <td>A4</td>
          <td>B4</td>
          <td>C4</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td>总分</td>
          <td colspan="3">score</td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>

在这里插入图片描述

th

th表示头部的单元格，和td同一等级

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <table border="1" width="50%" align="center">
      <tr>
        <th>A1</th>
        <th>B1</th>
        <th>C1</th>
        <th>D1</th>
      </tr>
      <tr>
        <td>A2</td>
        <td>B2</td>
        <td>C2</td>
        <td>D2</td>
      </tr>
      <tr>
        <td>A3</td>
        <td>B3</td>
        <td>C3</td>
        <td>D3</td>
      </tr>
      <tr>
        <td>A4</td>
        <td>B4</td>
        <td>C4</td>
        <td>D4</td>
      </tr>
    </table>
  </body>
</html>

在这里插入图片描述

表格样式

table独占一行，但是宽度是被内容撑开的。可以当作块元素对待。

border-spacing控制边框之间的距离

table{
            width: 50%;
            border:1px solid black;
            border-spacing: 1px;
        }

在这里插入图片描述

border-collapse设置边框

border-collapse: collapse;

eg：

 table{
            width: 50%;
            border:1px solid black;
            /* border-spacing: 1px; */
            border-collapse: collapse;
        }

设置边框成为一行
在这里插入图片描述

一行一个元素

       table tr:nth-child(odd){
            background-color:gainsboro;
        }

或者：

        tbody>tr:nth-child(odd){
            background-color:gainsboro;
        }

输出：
在这里插入图片描述

注意

如果表格中没有使用tbody而是直接使用tr,那么浏览器会自动创建一个tbody，并且将tr全都放到tbody中，所以tr不是table的子元素。

垂直居中

默认情况下元素在td中是垂直居中的，可以通过vertical-align进行调整。
在表格中vertical-align可以直接设置元素垂直方向上的排列，vertical-align：center可以直接设置元素垂直居中。
所表格内容的居中可以写成：

td{
            border: 1px solid black;
            height: 100px;
            vertical-align: middle;
            text-align: center;
        }

在这里插入图片描述

利用table-cell使元素垂直居中

table的 vertical-align: middle;属性可以使元素垂直居中，所以可以利用这一特点使用到其他元素。
需要将父元素的display设置为table-cell

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=div, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width: 300px;
            height: 300px;
            background-color: goldenrod;
            display: table-cell;
            vertical-align: middle;
        }
        .box2{
             width: 100px;
            height: 100px;
            background-color: rgb(184, 98, 58);
            margin: 0px auto;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>
</html>

在这里插入图片描述

_洋
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML（笔记）
qq_51402804的博客
07-17 165
Web标准的构成 标签： 1.HTML基本结构标签 网页开发工具 标题标签<h1>-<h6> 段落和换行标签 特点： 1. <br /> 是个单标签。 2. <br /> 标签只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距。 文本格式化标签 图像标签 图像标签属性注意点： ① 图像标签可以拥有多个属性，必须写在标签名的后面。 ② 属性之间不分先后顺序，标签名与...
HTML_表格
dolola的博客
01-20 367
表格标题               其中会存在跨行、跨列的情况存在。 跨行时，即一个表格可能对应着多列表格，此时使用colspan、rowspan。 我们以跨两行为例，以上代码第三行应修改为 以跨两列为例，以上代码第四行代码应修改为 关于边框，由border定义，不写和border="0
HTML 表格
csdnyao9的博客
06-02 70
表格由<table>标签来定义。每个表格均有若干行（由<tr>标签定义），每行被分割为若干单元格（由<td>标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。 　HTML 表格的基本结构： <table>…</table>：定义表格 <th>…</th>：定义表格的标题栏（文字加粗） <tr>…</tr&
Html中超链接标记独占一行,HTML
weixin_33314040的博客
07-09 952
课程介绍1.前端：写网页(7天，掌握)2.后台：Flask。Django。tornado(17天重点学会)3.前端页面：电商首页搭建4.搭建电商项目，OA系统5.就业岗位：后台开发工程师，全栈开发工程师网页开发环境准备浏览器：谷歌编辑器pycharmHTMLhtml(hyper text mark-up language)：超文本标记语言超文本：基本特征可以连接到其他的网页标记：注意：html语言...
html表单占满一行,1.6.5版本的antd,form组件默认状态下不管列表占了几栅格都会自动霸占一行...
weixin_33716865的博客
06-21 541
演示代码:const { Form, Select, InputNumber, DatePicker, TimePicker, Switch, Radio,Cascader, Slider, Button, Col, Upload, Icon } = antd;const FormItem = Form.Item;const Option = Select.Option;const RadioBu...
html之表格标签
chaowang111的博客
10-20 560
表格标签中的table标签：代表整个表格，也就是一对table标签就是一个表格。tr标签：代表整个表格中的一行数据，一对tr标签就是表格中的一行。td标签：代表表格中一行中的一个单元格，也就是说一对td标签就是一行中的一个单元格。
html表格——表格合并.docx
09-26
HTML 表格合并 HTML 表格合并是指在 HTML 表格中，合并单元格的技术。合并单元格可以将多个单元格合并成一个单元格，从而实现表格的灵活布局。 在 HTML 表格中，cell 属性是一个非常重要的概念。cell 属性表示表格...
HTML标记语言——表格标记
12-10
上文：标记语言——标题 原文出处 标准化设计解决方案 – 标记语言和样式手册 Web Standards Solutions The Markup and Style Handbook Part 1: Get Down With Markup 从标记语法谈起 Chapter2 邪恶的表格？ 你知道...
HTML5制作表格样式
09-27
接下来是关键部分——表格的HTML结构。`<table>`元素是表格的容器，`<thead>`表示表头，`<tbody>`表示表格主体，`<tfoot>`表示表尾。例如： ```html 列1 列2 行1，单元格1 行1，单元格2 行2...
生产计划管理表格——生产计划综合报表
12-14
听说你还在满世界找生产计划管理表格——生产计划综合报表？在这里，为大家整理收录了最全、最...该文档为生产计划管理表格——生产计划综合报表，是一份很不错的参考资料，具有较高参考价值，感兴趣的可以下载看看
HTML基础知识
qq_56290939的博客
06-07 482
关于前端html的一些基础知识
CSS table 单行布局
HelloLWei的专栏
08-28 1458
table{border-collapse:collapse;}   td{border:1px blue solid;}   -->      table{border-collapse:collapse;}   td{border:1px blue solid;}              asdfasdfasdfasdfasdf
HTML列表、表格以及表单
最新发布
weixin_52071901的博客
05-10 896
剩余day02部分，以及day03部分，day04
如何设置table，使单元格内容无论多少，只显示一行，超过单元格宽度的部分自动隐藏，当鼠标放到单元格上，内容自动显示完整？
翔云
01-21 6291
主要包括3个步骤： 设置style <style> .table{ *table-layout: fixed;* } .table td:hover{ overflow: visible; white-space: normal; } .table td { word-wrap: break-word;
html表格标签
weixin_44992737的博客
06-06 5291
html表格标签详解
HTML中Table标签的属性及应用
m0_58514898的博客
06-02 777
html table的表格属性： 1、 属性 1.width：设置表格宽度 2.height：设置表格高度 3.align：设置 表格 在其 父元素中的水平对齐方式，取值：left,center,right 4.border：边框,边框宽度，以px为单位的数值，px可以省略 ...
css
weixin_39419463的博客
12-30 494
css第一天
jq 控制td只显示一行_如何让html中的td文字只显示部分
weixin_39861905的博客
12-19 539
这个问题呢，是由于我们公司测试的部门测出来的，虽然说测试的内容本身就是个BUG，不过这个也让我学到了一个比较好的归类于布局的一个小技巧，就是将td标签中过长的内容只显示为这个td的width的长度，之后的便以省略号代替。方式如下：这个功能有一个前提，在table中必须设置style:table-layout: fixed;这条属性就是让table的内部布局固定大小。这个时候就用width属性调节t...
html5 表格标签 table tr td
weixin_30699741的博客
06-15 3002
最重要的三个 <table> 表格声明标签 属性: boarder边框粗细 style可配合css 使用 <tr>行标签 table row 有表就可以建行 <td>单元格标签 table data 有行就可以建数据 属性: colspandata占用格子, 或者可以理解为这个单...
HTML表格标记属性详解
1. **设置表格的宽度和高度——width和height** 在HTML中，可以使用`<table>`标签内的`width`和`height`属性来指定表格的宽度和高度。例如： ```html ``` 这将创建一个宽500像素，高300像素的表格。 2. **...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值