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

2024.3.31   阿福的工作室

相关文章
|
5月前
|
敏捷开发
【sgCreateTableColumn】自定义小工具:敏捷开发→自动化生成表格列html代码(表格列生成工具)[基于el-table-column]
【sgCreateTableColumn】自定义小工具:敏捷开发→自动化生成表格列html代码(表格列生成工具)[基于el-table-column]
|
20小时前
table表格基础知识及简单运用
table表格基础知识及简单运用
7 0
|
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(避坑)
248 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
表格| 学习笔记