table表格的使用(表格的嵌套、合并)

article/2025/4/25 0:22:50

表格基本格式

<table>
//第一行
<tr>
<td>第一列</td>
<td>第二列</td>
</tr>
//第二行
<tr>
<td>第一列</td>
<td>第二列</td>
</tr>
</table>

1.<table></table>:定义一张表格

2.<tr></tr>:定义行

3.<td></td>:定义列

4.<thead>:定义表格头部

5.<tbody>:定义表格主体

6.<tfoot>:定义表格尾部

表格中的几种属性

1.border="1":不加此属性则不会显示边框。取值为正整数,数值越大,边框越粗。

2.width="100":设置表格的宽度

3.height="100":设置表格的高度

4.align="center":表格对齐方式,center:居中对齐,left:向左对齐,right:向右对齐

5.bgcolor="":表格背景颜色

6.background="(url)":背景图片

7.cellpadding="":表格中每个格子的内边距(即文字等元素与格子边框之间的距离)

    举例:

<table border="1" cellpadding="10">
<!--    第一行--><tr><td>第一列</td><td>第二列</td></tr>
<!--    第二行--><tr><td>第一列</td><td>第二列</td></tr>
</table>

 cellpadding="10":内边距设置为10像素时

 

 cellpadding="0":内边距设置为0像素时

 

8.cellspacing="":表格中每个格子的外边距(即小格子与整体表格边框之间的距离)

     举例:

<table border="1" cellspacing="10">
<!--    第一行--><tr><td>第一列</td><td>第二列</td></tr>
<!--    第二行--><tr><td>第一列</td><td>第二列</td></tr>
</table>

   cellspacing="10":外边距设置为10像素时

   

   cellspacing="0":外边距设置为0像素时

表格的合并(列,行)

1.合并表格的列

<!--表格合并-->
<table border="1"width="300"cellpadding="0"cellspacing="0"align="center"><tr><!-- colspan="2"合并两列--><th colspan="2">&nbsp;</th></tr><tr><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td>&nbsp;</td><td>&nbsp;</td></tr></table>

样式:

2.合并表格的行

<!--表格合并-->
<table border="1"width="300"cellpadding="0"cellspacing="0"align="center"><tr><th>&nbsp;</th><th>&nbsp;</th></tr><tr><!-- rowspan="2" 合并两行--><td rowspan="2">&nbsp;</td><td>&nbsp;</td></tr><tr><td>&nbsp;</td></tr>
</table>

样式:

 

表格的嵌套

<!--表格嵌套-->
<table border="1"width="300"cellpadding="0"cellspacing="0"><tr><td><!--在第一行第一列中再嵌套一个表格(两行、两列的表格)--><table border="1" width="100%"><tr><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td>&nbsp;</td><td>&nbsp;</td></tr></table></td><td>&nbsp;</td></tr><tr><td>&nbsp;</td><td>&nbsp;</td></tr>
</table>

样式:


http://chatgpt.dhexx.cn/article/Z6QfMDaf.shtml

相关文章

vue3 antd table表格样式修改——ant design vue table表格的行高调整

vue3 antd项目实战——修改ant design vue table组件的默认样式&#xff08;调整每行行高&#xff09; 知识调用场景复现实际操作解决a-table表格padding过宽 知识调用 文章中可能会用到的知识链接vue3ant design vuets实战【ant-design-vue组件库引入】css样式穿透&#xff0…

web第十课:table表格标签

1.table表格介绍 table是表格标签&#xff0c;里面包含有行tr&#xff0c;行tr里包含td单元格 注意&#xff1a;table里只能包含tr&#xff0c;tr里面也只能包含td&#xff0c;td里面可以包含其他标签 代码演示&#xff1a; 这里在码标签的时候别忘了我们的快捷方式&#xff…

table表格基础

1.table主要用于呈现格式化数据。由行和列组成。 格式&#xff1a; <table><tr><th>表头</th><th>表头</th><th>表头</th></tr><tr><td>列1</td><td>列2</td><td>列3</td>…

手写table表格

<template> <div class"table" style"overflow-y: auto; height:15em; width:100%"> //overflow-y控制y轴滚动<table border"0" width"100%" height"16em" cellpadding"4.8" align"center&qu…

el-table表格还可以这么玩

六年代码两茫茫&#xff0c;不思量&#xff0c;自难忘 6年资深前端主管一枚&#xff0c;只分享技术干货&#xff0c;教你如何优雅地写代码 关注博主不迷路~ 文章目录 前言案例介绍案例截图效果预览template模板script部分css总结 前言 我们都知道表格是横向渲染的&#xff0c;一…

html使table整体居中,如何让整个table表格居中?

早期做网站都离开表格的使用&#xff0c;表格的对齐方式居中又是常用属性。居中最简章的方法就是直接在作用域写上&#xff1a;text-align:center&#xff0c;表格的话直接在table里写上aligncenter就可以了。不过表格已不是当下布局主流&#xff0c;如果习惯于表格布局的同学们…

Html——之table表格

表格&#xff08;table&#xff09;的应用&#xff1a; 表格的创建&#xff1a; <!doctype html> <html> <head> <meta charset"utf-8"> <title>test1</title> <--表格标记--> </head> <body><table>…

前端table表格的用法

文章目录 一、table的基础用法二、table属性三、合并单元格拓展总结 一、table的基础用法 代码如下&#xff1a; <table><tr>//第一行<td>第一行第1列</td><td>第一行第2列</td></tr><tr>//第二行<td>第二行第1列<…

HTML table表格详解

一、表格属性 表格属性 用法 border 代表表格边框厚度 width height 表格宽高 align table tr td 设置水平方向对齐方式 默认值left center right cellspacing 单元格到单元格距离 cellpadding 单元格文字到单元格边框距离 bgcolor 表格背景颜色 table tr td 都可以…

element-ui实现table表格的嵌套(table表格嵌套)功能实现

最近在做电商类型的官网&#xff0c;希望实现的布局如下&#xff1a;有表头和表身&#xff0c;所以我首先想到的就是table表格组件。 表格组件中常见的就是&#xff1a;标题和内容一一对应&#xff1a; 像效果图中的效果&#xff0c;只用基础的表格布局是不行的&#xff0c;因…

table表格

在HTML中&#xff0c;创建表格需要使用table标签 学习table之前&#xff0c;先了解下table标签的常用属性 属性值说明align left center right 规定标的的对齐方式&#xff0c;left左对齐&#xff0c;center居中&#xff0c;right右对齐&#xff1b;bgcolor rgb(x,x,x) #xxx…

table(表格)的简单介绍

table&#xff08;表格&#xff09;的创建 <!DOCTYPE html> <html><head><meta charset"utf-8"><title></title></head><body><table border"1" width"500" height"300" bgcolor…

table表格详细介绍

表格标签 table 我们在浏览网页时经常能发现段落、列表、图片等等元素出现比较多&#xff0c;但偶尔呢&#xff0c;也会看到一些表格元素&#xff0c;那么表格在代码中如何实现呢&#xff1f; 一个完整的表格应该是由table、thead、tbody、tfoot、tr、th、td组成。那么这么多…

table表格基础知识及简单运用

1.什么是table表格 在HTML中我们用< table >标签来定义表格&#xff0c;它和Excel表格类似&#xff0c;都包括行、列、单元格、表头等&#xff0c;但是在功能方面HTML的表格远不如Excel强大。 2.table的常用属性 margin&#xff1a;主要设置表格的外边框padding&#…

HTML中Table表格的使用与漂亮的表格模板

1、表格标记 表格是网页中十分重要的组成元素。表格用来存储数据&#xff0c;包含标题、表头、行和单元格。在HTML语言中&#xff0c;表格标记使用符号<table>表示。定义表格光使用<table>是不够的&#xff0c;还需要定义表格中的行、列、标题等内容。 标记说明表…

西方世界的劫难Ⅳ:真神的国度--十大支线攻略

西方世界的劫难&#xff0c;是在大一即将放暑假的前几天&#xff0c;两位大佬带我打的(犹记当时一个三射箭抢了全部的兵&#xff0c;偷笑)&#xff0c;几经挫折&#xff0c;加上一些前辈的经验&#xff0c;自己也算是真正意义上稍微理解了这个地图&#xff0c;于是记录一下西方…

如何评价伊隆·马斯克创办的脑机接口公司 Neuralink ?

作者&#xff1a;李明骏 链接&#xff1a;https://www.zhihu.com/question/57713553/answer/154395266 来源&#xff1a;知乎 著作权归作者所有。商业转载请联系作者获得授权&#xff0c;非商业转载请注明出处。 以此为引&#xff0c;从定义和原理出发谈谈脑机接口的商业发展…

第一视角:深度学习框架这几年

‍‍‍‍‍‍‍‍ 作者 | Peter潘欣 转自 | 夕小瑶的卖萌屋 和深度学习框架打交道已有多年时间。从Google的TensorFlow, 到百度的PaddlePaddle&#xff0c;再到现在腾讯的无量。很庆幸在AI技术爆发的这些年横跨中美几家公司&#xff0c;站在一个比较好的视角看着世界发生巨大的…

挠场的科学丨五、二十一世纪的挠力文明

摘自李嗣涔教授《挠场的科学》 十九世纪末&#xff0c;特斯拉发明多相交流马达&#xff0c; 促成了二十世纪电力文明的开展&#xff0c; 他也提出几项当时认为科幻的创新概念。 这些基于挠场作用的概念&#xff0c; 及挠场侦测器的发明&#xff0c; 将会在二十一世纪促成挠…

带你快速看完9.8分神作《Effective Java》—— 序列化篇(所有RPC框架的基石)

&#x1f525; Java学习&#xff1a;Java从入门到精通总结 &#x1f525; Spring系列推荐&#xff1a;Spring源码解析 &#x1f4c6; 最近更新&#xff1a;2022年1月20日 &#x1f34a; 个人简介&#xff1a;通信工程本硕&#x1f4aa;、阿里新晋猿同学&#x1f315;。我的故…