表格标签
定义:给一堆数据添加表格语义
格式:
<table>
<tr>
<td>需要显示的内容</td>
</tr>
</table>
表格中<table>标签是代表整个表格,即一堆<table>标签就是一个表格
<tr>标签代表表格中的一行
<td>标签代表一行中的一个单元格
注意点:
1.表格有一个边框属性,默认为0,要想显示边框,需要在table标签中添加属性border=“1”
2.表格标签是一个组合,一起出现
表格标签属性(了解)
1.宽度和高度属性:只给table标签和td标签
1.1宽度可通过给table标签设置width和height属性来手动设置宽度和高度
1.2如果把td单元格设置宽度和高度,只会改变当前单元格的宽和高,不会影响整个单元格的宽和高
2.水平对齐和垂直对齐属性
其中水平对齐可以给table和tr和td标签使用
垂直属性只能给tr和td属性使用
2.1给table标签设置align属性可以控制表格在水平方向上的对齐
2,2给tr标签设置align属性可以控制当前所有单元格水平方向的属性
2.3给td设置align属性,可以控制当前单元格在水平方向上的属性
方向属性注意点:如果在tr中设置了align属性,td中也设置了align属性,那么单元格会按照td中的设置来
2.4给tr设置vlign可以控制当前行所有属性垂直方向的属性
2.5给td设置vlign属性可以控制当前单元格所在垂直方向上的属性
3.外边距和内边距:只能给table标签使用
3.1外边距指的是单元格与单元格之间的间隙,默认是2,cellspacing=“2px”
3.2内边距指的是文字与单元格之间的间隙,cellpadding=1"
**注意:以上内容仅仅作为了解,所有控制央视用css
画一个细线表格(了解)
1给table标签设置bgcolor,cellspacing=“1px”
2给tr标签设置bgcolor
表格标签中的其它标签
caption标签,在表格标签中专门用于指定表格标题的
注意点:
1caption标签必须写在table标签内,否则无效
2caption必须紧跟在table标签后面
例如:
<table bgcolor="black" cellspacing="1px" width="800px" align="center">
<caption>
<h2>今日小说排行榜</h2>
</caption>
<tr bgcolor="#a9a9a9">
标题单元格标签
在表格标签中,提供了一个标签专门用来设置每一列表标题,在各个标题标签叫做th标签,只要将当前列标题存储在这个标签中,就会自动居中加粗文字。
到此为止,发现表格中有两种单元格td和th标签,td标签专门用来存数数据的,th标签专门用来存储当前列的标题。
单元格合并
1.水平方向的合并
可以给td标签添加colspan属性,用来把某个单元格当做多个单元格来看待
例如:
<td colspan="2"></td>
含义:把当前单元格当做两个单元格来看待
注意点:
1由于把某一个单元格当做多个单元格来看待,所以就会多出一些单元格,所以需要删掉一些单元格
2单元格永远是向右或者向下合并
3垂直合并单元格<td rowspan="2"></td>
练习中的注意点:快捷键的使用
1快速移动选中的代码:上下移动
往上移动Ctrl+shift+向上的箭头
往下移动Ctrl+shift+项下的箭头
快速合并展开代码
合并Ctrl+-,展开Ctrl++
快速合并和展开代码(合并和展开选中的所有的标签)
合并Ctrl+shift+-
展开Ctrl+shift+-
快速新奇一行:shift+enter