1.表格的使用(之前用来做网页布局的 现在只用来做数据展示)
表格的标签名称
- table 表示表格
- tr 表示表格中的行
- td 表格表格中的列(行与列相交部分的单元格)
2.表格的基本属性
1.width/height/border
2.bordercolor/bgcolor 边框的颜色/表格的背景颜色
3. cellspacing 单元格与单元格之间的间距
4.cellpadding:内容与单元格之间的距离
- cell 细胞、单元格
- space 空间
- padding 内边距
5.bgcolor:背景颜色
6.bordercolor:边框的颜色
7.设置字体:font-size:20px;====利用css样式
8.th标签:自带加粗与居中效果,一般用在表格的第一行
9.rules属性===写在table上的,专门用来化线的,规定画哪种类型的线
取值:①取值:rows==只有横向的线
②取值:cols==绘制纵向的线
③取值:all==绘制横线与竖线
④取值:groups===按照组划线====前提:必须分组
问题:如何分组
① 按照行分组
1.thead==只能使用一次==表格的头部区域
2.tbody==可以使用多次===表格的身体区域
3.tfoot==只能使用一次===表格的尾部区域
注意:如果不分组,浏览器会把所有的东西会自动放在一个tbody中
②按照列分组
<colgroup span=“数字”><colgroup>==数字是几安几列分组
10.表格的标题标签:caption
3.对齐方式
- 水平方向 align:left right center
- 垂直方向 valign:top bottom middle
- 难点:行列合并
- 列合并 colspan
- 行合并 rowspan
- span作为属性出现的时候表示选中几个 行列合并的属性值要是一个数字
4.表格中的高级属性及标签
①- 数据的行分组
- tbody 默认会生成一次 包裹住表格中的所有内容 无数个
- thead/tfoot 表格的头部和底部 成双成对 只有一个
②- 数据的列分组
- 单标签 col
- 双标签 colgroup
③- 属性:
- span 选择几个列
- width 控制这几个列的宽度
- 表格的列标题:th 默认字体是加粗并且居中显示
- 表格标题:caption
④tr的属性
1.height====单独调整某一行的高度
2.bgcolor===当都调整某一行的背景颜色
3.align====调整某一行的内容水平对齐方式
left、center、right
4.valign===调整某一行的内容垂直对齐方式
top、center、bottom
⑤td上的属性:
1.width:设置⼀个单元格的宽度,会影响这个单元格⼀整列的宽度。
2.height:设置⼀个单元格的⾼度,会影响这个单元格所在的⼀整⾏的⾼度。
3.bgcolor:单独调整这一个格子的背景颜色
4.align:某一个单元格内容的水平对齐方式
5.valign:某一个单元格内容的垂直对齐方式
6.行合并rowspan(横着的线不见)
7.列合并colspan(竖着的线不见了)
5.表格的css样式语句
1.border-spacing=====格子与格子的间距
2.border-collapse: collapse;=====合并相邻的边框线(画细线表格)
3.table-layout: fixed;表格单元格的固定(能实现格子宽度均分的效果)
表格的宽度分配原则:
根据内容自行分配,如果内容多,就多分一点,少,就少分一点
4.empty-cells:空格⼦显示⽅式。
hide:隐藏
show:显示(默认值)
body>
<!-- 三行三列的表格 -->
<!-- table>tr*3>td*3 -->
<table width="300" height="300" border="1" cellspacing="0" cellpadding="10" rules="groups">
<caption>统计表</caption>
<colspan="2" width="50"> <!-- 列合并 -->
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
</thead>
<tbody>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</tfoot>
</table>
</body>