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

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

1.什么是table表格


在HTML中我们用< table >标签来定义表格,它和Excel表格类似,都包括行、列、单元格、表头等,但是在功能方面HTML的表格远不如Excel强大。


2.table的常用属性


margin:主要设置表格的外边框

padding:设置内边距

border:设置表格的边框

width:设置表格的宽度

height:设置表格的高度

bgcolor:设置背景颜色

background:背景图片

border-collapse:合并边框

tr:行

th/td:单元格


3.怎么制作一个table表格

(1)制作一个table表格,我们需要确定表格的行列数,比如,我们要制作一个三行四列的表格,那么就是三行,每行四个单元格,我们可以运用快捷写法(tr * 3>td * 4)直接回车键会自动生成一个三行四列的表格,如下代码:


(2)tr的属性:


border:边框(粗细、颜色等直接在border后面加“-”加属性即可)

align:水平对齐

vlign:垂直对齐

bgcolor:背景色

(3)th/td的属性


width:单元格的宽度

height:单元格的高度

border:单元格的边框

align:水平对齐

vlign:垂直对齐

bgcolor:背景色

background:背景图片

colspan:跨列(水平合并)

rowspan:跨行(垂直合并)

相关文章
|
7月前
|
敏捷开发
【sgCreateTableColumn】自定义小工具:敏捷开发→自动化生成表格列html代码(表格列生成工具)[基于el-table-column]
【sgCreateTableColumn】自定义小工具:敏捷开发→自动化生成表格列html代码(表格列生成工具)[基于el-table-column]
|
8天前
|
存储 Java 数据库
深入剖析---数据表如何用索引
【11月更文挑战第25天】在大数据时代,处理千万级数据表已成为许多企业和开发者必须面对的挑战。如何快速、高效地查询这些数据,成为衡量系统性能的关键指标之一。索引,作为数据库优化中最重要的工具之一,通过特定的数据结构和算法,能够显著提高查询效率。本文将从第一原理出发,对索引的相关概念、业务场景、历史背景、功能点、底层原理进行深入分析,并使用Java模拟索引的底层实现。
18 1
|
4月前
table表格基础知识及简单运用
table表格基础知识及简单运用
|
4月前
|
前端开发
探索HTML表格的奥秘:学会使用 <table>标签创建精美表格
探索HTML表格的奥秘:学会使用 <table>标签创建精美表格
在阿里云RPA中,你可以使用"表格控件"来处理网页上的table数据
在阿里云RPA中,你可以使用"表格控件"来处理网页上的table数据
228 1
element table表格表头动态渲染效果demo(整理)
element table表格表头动态渲染效果demo(整理)
|
JavaScript
【项目经验】elementui--table表格自定义表头及bug
elementui--table表格自定义表头及bug(避坑)
267 0
|
存储 API
【ElementUI】Table表格动态合并
【ElementUI】Table表格动态合并
255 0
|
存储 JavaScript 前端开发
vue前端实现配置化表格el-table列的隐藏与展示(具有记忆功能)
vue前端实现配置化表格el-table列的隐藏与展示(具有记忆功能)
749 0
|
SQL 存储 监控
【MySQL从入门到精通】【高级篇】(二十三)EXPLAIN的概述与table,id字段的剖析
上一篇文章我们介绍了【MySQL从入门到精通】【高级篇】(二十二)慢查询日志分析,SHOW PROFILE查看SQL执行成本,这篇文章我们接着来介绍一下MySQL中一个非常重要的命令 EXPLAIN。当我们定位到查询慢的SQL之后,我们就可以使用EXPLAIN或DESCRIBE工具做针对性的分析查询语句。 DESCRIBE 语句的使用方法与EXPLAIN语句是一样的,并且分析结果也是一样的。
193 0
【MySQL从入门到精通】【高级篇】(二十三)EXPLAIN的概述与table,id字段的剖析