前端学习笔记一一HTML表格标签(table)

前言

表格是网页制作中使用最多的工具之一,在制作网页时,使用表格可以更清晰地排列数据。但是在实际制作过程中,表格更多用在网页布局的定位上。很多网页都是以表格布局的。这是因为表格在文本和图像的位置控制方面都有很强的功能。

# 1.表格的基本构成

表格由行、列、和单元格3部分组成,一般通过3个标记来创建,分别是表格标记

、行标记、和单元格标记
。表格的各种属性都要在表格的开始标记和表格的结束标记
之间才有效。

创建表格的四个元素:

table、tr、th、td

...

:整个表格以标记开始、
标记结束。

...:表格的一行,那么以为着有几对,表格就有几行。

...:表格的一个单元格,一行中包含几对,说明一行中就有几列。

:表格的头部的一个单元格,表格表头。

表格中列的个数,取决于一行中数据单元格的个数

动物名称 物种 生活习性 食性
老虎 猫科动物 单独活动 肉食
狮子 猫科动物 集群 肉食
大象 哺乳纲动物 群居 草食

前端学习笔记一一HTML表格标签(table)_第1张图片

# 表格属性
## 表格标题caption

一个表格只能有一个标题

在上述代码的

间添加动物世界

前端学习笔记一一HTML表格标签(table)_第2张图片

## 表格宽度与高度

表格宽度为width,高度为height

语法为

前端学习笔记一一HTML表格标签(table)_第3张图片

## 表格表头对齐方式align

语法为

在对齐方式中填入相应的属性值:

left:左对齐
center:居中
right:右对齐

## 表格边框宽度border

border值不设置时或设置为0时,显示为无边框

语法为

 , 5为边框宽度

## 表格边框颜色bordercolor

语法为

 , 各颜色对应的具体编码可从网上查找

## 表格内框宽度cellspacing

表格内框宽度属性用于设置表格内部每个单元格之间的间距

语法为

## 表内文字与边框边距cellpadding

在默认情况下,单元格里的内容会紧贴着表格的边框,这样看上去会非常拥挤,可用词语法设置其间距离

语法为

## 表格背景颜色bgcolor

语法为

## 表格背景图像background

语法为

## 表格表首标记thead

表首样式的开始标记是

,结束标记是。它用于定义表格最上端表首的样式,可以设置背景颜色、文字对齐方式、文字垂直方式等。

## 表主体标记tbody

表主体标记与表首标记功能类似,表主体样式用于统一设计表主体部分的样式,标记为

## 表格表尾标记tfoot

用于定义表尾样式

# 行属性
## 表格行属性设置

表格中行属性的设置与表格的属性设置类似,只需要将相关的属性值添加在行标签中即可,如


多个参数值用空格隔开

## 表格行对齐方式

表格中行对齐方式除了上面在表头对齐方式中介绍的水平对齐方式align,还有垂直对齐方式valign

语法为

可设置的值有三个:topmiddlebottom

valign也可用于单元格属性

# 单元格属性
## 单元格大小

语法为

## 水平跨度colspan

在设计表格时,有时需要将两个或多个相邻单元格合成一个单元格

语法为

## 垂直跨度rowspan

单元格除了可以在水平方向上跨列,还可以在垂直方向上跨行

语法为

给出一段实例代码:




    
    
    
    Demo


    
动物世界
动物名称 物种 生活习性 食性
老虎 猫科动物 单独活动 肉食
狮子 猫科动物 集群
大象 哺乳纲动物 群居 草食

前端学习笔记一一HTML表格标签(table)_第4张图片

你可能感兴趣的:(前端学习笔记一一HTML表格标签(table))