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:跨行(垂直合并)

相关文章
|
5月前
|
敏捷开发
【sgCreateTableColumn】自定义小工具:敏捷开发→自动化生成表格列html代码(表格列生成工具)[基于el-table-column]
【sgCreateTableColumn】自定义小工具:敏捷开发→自动化生成表格列html代码(表格列生成工具)[基于el-table-column]
|
2月前
table表格基础知识及简单运用
table表格基础知识及简单运用
|
2月前
|
前端开发
探索HTML表格的奥秘:学会使用 <table>标签创建精美表格
探索HTML表格的奥秘:学会使用 <table>标签创建精美表格
ABAP 数据字典里数据元素(Data Element),结构(Structure)和表类型(Table Type)三者的使用辨析试读版
ABAP 数据字典里数据元素(Data Element),结构(Structure)和表类型(Table Type)三者的使用辨析试读版
element table表格表头动态渲染效果demo(整理)
element table表格表头动态渲染效果demo(整理)
|
JavaScript
【项目经验】elementui--table表格自定义表头及bug
elementui--table表格自定义表头及bug(避坑)
246 0
|
存储 API
【ElementUI】Table表格动态合并
【ElementUI】Table表格动态合并
229 0
|
SQL 存储 监控
【MySQL从入门到精通】【高级篇】(二十三)EXPLAIN的概述与table,id字段的剖析
上一篇文章我们介绍了【MySQL从入门到精通】【高级篇】(二十二)慢查询日志分析,SHOW PROFILE查看SQL执行成本,这篇文章我们接着来介绍一下MySQL中一个非常重要的命令 EXPLAIN。当我们定位到查询慢的SQL之后,我们就可以使用EXPLAIN或DESCRIBE工具做针对性的分析查询语句。 DESCRIBE 语句的使用方法与EXPLAIN语句是一样的,并且分析结果也是一样的。
185 0
【MySQL从入门到精通】【高级篇】(二十三)EXPLAIN的概述与table,id字段的剖析
|
编解码 前端开发 BI
表格| 学习笔记
快速学习表格。
149 0
表格| 学习笔记