HTML table表格标签

table表格标签

用于在HTML中生成一个二维表格,用于展示相应的信息:XXX管理系统、购物车等。

一、主要元素

table标签主要元素如下表格所示

table 祖先元素,它有两个子元素,thead和tbody
thead 表头,它有一个子元素,th
th 表头内容
tbody 表格主题(不可省略),有一个子元素,tr
tr 行,表格一般都是多行
td 单元格

其中说到不可省略,说明有些是可以省略的哦,如caption(标题)、tfoot元素,一般都可以省略不写,也可以说用不到。

二、主要属性

1.border

添加在table起始标记中,不添加是默认为0,设置边框的粗细

2.background&bgcolor

背景颜色或图片,可以添加在table起始标记中,也可以添加到其他标签起始标记中,改变一行、一个单元格的背景颜色或图片

3.colspan&rowspan

和并列和合并行,一般在th和td中使用

 购物车
合计

4.cellpadding&cellspacing

单元格边距和单元格间距
添加在table起始标记中控制整体的边距和间距

5.align

文本在单元格中的对齐方式,在列或单个单元格中使用都可以

三、代码效果

   

计算器
 
mc m+ m- mr
C / * delete
7 8 9 -
4 5 6 +
1 2 3 =
% 0 .

HTML table表格标签_第1张图片

 

 无边框时,哦,好丑哟,

HTML table表格标签_第2张图片

 

border="5"
HTML table表格标签_第3张图片

 

 加入个别颜色与背景


    
购物车
购物车
行号 产品 单价 个数 小计
1 Apple ¥10 1 ¥10
2 Vivo ¥100 2 ¥200
3 Xm ¥1000 ¥3 ¥3000
4 Hw 10000 ¥4 ¥40000
合计 运费 ¥100
¥43310

HTML table表格标签_第4张图片

 

 加入边距、间距,改变对齐方式


    
购物车
购物车
行号 产品 单价 个数 小计
1 Apple ¥10 1 ¥10
2 Vivo ¥100 2 ¥200
3 Xm ¥1000 ¥3 ¥3000
4 Hw 10000 ¥4 ¥40000
合计 运费 ¥100
¥43310

HTML table表格标签_第5张图片

 

 

四、总结

从上面可以看出,在添加了不同的样式过后表格的变化还是很大的,但是其实一般表格就是用来简单简洁的展示一些信息的,过于“花哨”,可能适得其反哦。

表格难点应该是关于和并列和合并行,我并没有拿来特别说,因为这个真的要多试几次才能好好理解,多练几次总是好的啦!

合并其中有一个问题不能解决,就是计算器中的空白区域,只能合并出来一行空白,代码当中写再多行合并也只有一行空白(反正我试了好多次,囧)。

你可能感兴趣的:(HTML table表格标签)