表格标签的基本使用
表格标签是一个时代的代表
作用：用来给一堆数据添加语义。
格式：
<table>
<tr>
<td></td>
</tr>
</table>
table：代表整个表格
tr：代表整个表格中的一行数据
td：一行中的一个单元格
注意点：
1.表格标签有个边框属性，这个属性决定了边框的宽度，默认情况下这个属性的值是0，所以看不到边框
2.table/tr/td为一个整体，要么一起出现，要么一起不出现。
表格标签的属性（了解）
宽度和高度的属性
可以给table/td标签使用
border=“宽度”
width=“宽度”
weight=“高度”
注意点：
1.表格的宽度和高度默认是根据内容的尺寸来自动调整的；也可以通过table标签设置来手动指定宽度和高度。
2.如果给td标签设置width/height属性，会修改当前单元格的宽度和高度，整体单元格的宽度和高度不变。
水平对齐和垂直对齐的属性
水平对齐给table/tr/td标签使用
align =“left/center/right”
注意点：若给tr/td均设置，那么遵循td的设置为准。
垂直对齐只能给tr/td标签使用
valign=“top/center/bottom”
注意点：若给tr/td均设置，那么遵循td的设置为准。
外边距和内边距的属性
只能给table使用
外边距：单元格和单元格之间的距离。
cellspacing=“距离”
默认情况下，cellspacing=“2”
内边距：文字和单元格之间的距离。
cellpadding=“距离”
默认情况下，cellpadding=“1”
以上内容作为了解，企业开发中，以css来控制样式。
细线表格（理解）
在表格标签中，无法通过设置外边距为0来实现细线表格。
格式：
<table bgcolor=“black” cellpacing=“1px”>
<tr bgcolor=“white”>
细线表格制作
1.给table标签设置bgcolor
2.给tr标签设置bgcolor
3.给table标签设置cellspacing=“1px”
注意点：
table/tr/td标签都支持bgcolor
表格中其他标签（理解）
表格标题标签：
格式：
<caption>...</caption >
注意点：
1.一定要写在table标签中，否则无效。
2.caption标签要紧跟table标签后面。
3.只要将标题写在caption标签之中，标题就能自动对应表格居中。
3.标题和表格自动成为一个整体。
标题单元格标签：
<th>...</th>
将当前列标签中的内容，都放在th标签中，就能自动居中加粗。
td：存储普通数据
th：存储标题，会对内容自动居中，加粗。
表格的结构（了解）
表格数据分类
1.标题（caption）
2.表头信息（thead）
3.主体信息（tbody）
4.页尾信息（tfoot）
注意点：
1.如果我们没有编写tobody，系统会自动给我们添加tbody。
2.如果指定thead和tfoot有自己默认的高度，不会随着表格高度的变化而变化。
单元格合并（理解）
水平方向上的单元格合并
<td colpan=“2/3/4”>
垂直方向上的单元格合并
<td rowspan=“2/3/4”>
注意点：
1.由于把某一个单元格当作多个单元格来看待，所以就会多出一些单元格，所以需要删掉一些单元格，才能正常显示。
2.单元格合并都是向后或者向下合并。
快捷键
快速移动选中内容
ctrl+shift+
快速合并和展开代码
展开：ctrl++/ctrl+shift++
合并：ctrl+-/ctrl+shift+-
快速新启一行
shift+enter
网友评论