HTML中的table表格

article/2025/5/4 16:31:52

表格标签

分为行(tr)和列(td),行及列都可以进行合并操作
            table:定义表格
            tr:定义行
            td:定义列    //先有行,后有列
            th:多用于表头,定义表格中头部(加粗)
            border: 边框大小
            bordercolor:边框的颜色
            cellpadding:内容文本与单元格之间距离
            cellspacing:单元格与单元格之间距离

示例:

<body><h1 align="center">员工表</h1><hr width="90px" color="red" /><table border="1px" align="center" bordercolor="blue" cellpadding="20px" cellspacing="0px"><tr><th>姓名</th><th>性别</th><th>工作</th><th>薪资</th><th>操作</th></tr><tr><td>jack</td><td>男</td><td>后端开发</td><td>8000</td><td><a href="#">查询个人信息,这是个链接</a></td></tr><tr><td>rose</td><td>女</td><td>前端开发</td><td>7000</td><td><a href="#">删除</a></td></tr><tr><td>yiyan</td><td>女</td><td>小秘</td><td>10000</td><td><a href="#">删除</a></td></tr></table>
</body>

 

 

跨行跨列

rowspan跨行

原表格

<body><h1 align="center"></h1><hr width="90px" color="red" /><table border="1px" cellspacing="0px" cellpadding="20px" align="center" width="700px"><tr><th>姓名</th><th>联系方式</th></tr><tr><td>jack</td><td>0371-6666</td></tr><tr><td>jack</td><td>0371-8888</td></tr></table>
</body>

 实现跨行

<!-- 实现跨行 --><table border="1px" cellspacing="0px" cellpadding="20px" align="center"width="700px"><tr align="center"><th>姓名</th><th>联系方式</th></tr><tr align="center"><!-- 跨行 --><td rowspan="2">jack</td><td>0371-6666</td></tr><tr align="center"><td>0371-8888</td></tr></table>

 

colspan跨列

原表格

<!-- 原始table表 --><table border="1px" cellspacing="0px" cellpadding="20px" align="center" width="600px"><tr><td>姓名</td><td>联系方式</td><td>联系方式</td></tr><tr><td>rose</td><td>0371-8888</td><td>0371-9999</td></tr></table>

 

  实现跨列

<!-- colspan 实现跨列 -->	<table border="1px" cellspacing="0px" cellpadding="20px" align="center" width="600px"><tr align="center"><td>姓名</td><!-- colspan 实现跨列 --><td colspan="2">联系方式</td></tr><tr align="center"><td>rose</td><td>0371-8888</td><td>0371-9999</td></tr></table>


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

相关文章

elementUi——Table表格

Table表格 1、基础表格 在 Table 组件中&#xff0c;每⼀个表格由⼀个 Table-Column 组件构成&#xff0c;也就是表格的列 2、表格常用属性 3、常用属性 4、通过v-for封装适⽤性更好的表格 <el-table :data"tableData"><!-- 循环显示列 --><el-…

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

表格基本格式 <table> //第一行 <tr> <td>第一列</td> <td>第二列</td> </tr> //第二行 <tr> <td>第一列</td> <td>第二列</td> </tr> </table> 1.<table></table>&#x…

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;站在一个比较好的视角看着世界发生巨大的…