0
点赞
收藏
分享

微信扫一扫

【HTML】第六讲:表格的创建

熟能生巧@放纵lili

一、表格标签的基本介绍。

1、<table>标签

<table>标签可以用于定义表格对象,同事可以使用其标签设置表格的宽度、对齐方式、背景颜色等样式。其常用的属性有:

width宽度、height高度、bgcolor背景颜色、align=“left(左)/center(居中)right(右)”文字水平对齐、valign=“top(顶端)/middle(居中)/bottom(底部)”文字垂直对齐、cellspancing=“”单元格之间的间距、cellpadding=“ ”单元格与内容之间的空隙。

2、td标签

<td>标签其实就是表格中的单元格。

4、<th>标签

<th>标签也是表格中的单元格,和<td>标签类似,但它通常用于表头的单元格,更为特殊一些。

5、<tr>行标签

<tr>标签是用来生成表格中的行标签,一个<tr></tr>标签表示表格的一行。

可以包含多个<td>或<th>标签。

二、表格基本结构

【HTML】第六讲:表格的创建_表格的创建

现在我们来给这个表格添点内容

【HTML】第六讲:表格的创建_HTML_02

大家这时候就会发现,这怎么没有边框啊!别急,别急!上面讲的一些常用属性这不就派上用场了吗

【HTML】第六讲:表格的创建_表格的创建_03

这里我们也可以看到<th>标签实际上对字体会有默认的设置。

三、单元格的跨行和跨列设置。

1、单元格的跨行设置

rowspan=“ 所要合并单与格的行数 ”(用于<td>标签)

【HTML】第六讲:表格的创建_HTML_04

【HTML】第六讲:表格的创建_HTML_05

可以看到,只是在原有的表格的后三行中,每行各在左边加了一个单元格,使rowspan=“ ”向下跨两行,而“体育”被移到了右边,可见,rowspan=“ ”是向下跨行,而不是合并单元格,只需将空格删去即可。

【HTML】第六讲:表格的创建_表格的创建_06

2、单元格的跨列设置。

colspan=“ 所要合并单元格的列数”(用于<td>标签)

【HTML】第六讲:表格的创建_表格的创建_07

【HTML】第六讲:表格的创建_HTML_08

可见colspan也会跨列。

给表头设计一下

【HTML】第六讲:表格的创建_表格的创建_09

表格还有很多的样式设置

【HTML】第六讲:表格的创建_HTML_10

这里只展示了一点,学会了相关属性的设置,各种花花绿绿的表格都能做的出来,要多加练习!






举报

相关推荐

0 条评论