table表格
能够呈现一个表格
table是最外层 tr表示一行 td表示一列
table常用属性:
border="" 边框宽度 默认是0
width="" 表格宽度
height="" 表格高度
align="" center left(默认值) right 表格在页面中的对齐方式
bgcolor="" 当前背景颜色 bgColor="blue"
bordercolor="" 边框颜色 borderColor="red"
cellSpacing="" 每个单元格到周围的距离 cellSpacing="30"
cellPadding="" 单元格内部的内容到单元格边的距离
cellPadding="30"
tr常用属性:
align="" left right center 当前行的文字 在单元格中横向对齐方式
valign="" 当前行文字在单元格中纵向对齐方式
top middle bottom
bgcolor="" 当前行的背景颜色
td常用属性:
align="" left right center 当前单元格的文字 横向对齐方式
valign="" 当前单元格文字在单元格中纵向对齐方式
top middle bottom
bgcolor="" 当前单元格的背景颜色
width="" 当前单元格宽度 会影响当前这一列 都变宽
height="" 当前单元格的高度 会影响当前这一行 都变高
<table bordercolor="red" border="1" align="center" width="400" height="200">
<tr align="right">
<td>姓名</td>
<td>年龄</td>
<td>成绩</td>
</tr>
<tr bgcolor="blue" valign="top" align="center">
<td>海柱</td>
<td>35</td>
<td>35</td>
</tr>
<tr>
<td width="500">小强</td>
<td bgcolor="orange">12</td>
<td valign="bottom" align="right">96</td>
</tr>
</table>
细线表格
border-collapse:collapse边框合并
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
table{
border-collapse:collapse;
}
</style>
</head>
<body>
<table bordercolor="green" border="1" width="500" height="300" align="center">
<!-- tr*4>td*4 tab-->
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
表格标题使用
caption标签是表头标签
放在font中便于使用
th是自动加粗居中 表格表头
<table align="center" border="1" width="400" height="200">
<!-- 专门写表格标题的 比用其他标签方便很多 而且标题也会随着表格位置的变化而变化 -->
<caption>
<h1>
<font color="blue">学生成绩登记表</font>
</h1>
</caption>
<tr >
<!-- 一旦当前行是表格的标题第一行 那么最好使用th替代td作为每一个单元格 -->
<th>姓名</th>
<th>年龄</th>
<th>成绩</th>
</tr>
<tr>
<th>小白白</th>
<td>12</td>
<td>85</td>
</tr>
<tr>
<th>小黑</th>
<td>16</td>
<td>75</td>
</tr>
</table>
表格语义化
所谓语义化是让表格的结构更清晰 对最后显示效果几乎没有影响
语义化就是标签本身不带有任何样式 而只是 让结构更清晰
thead tbody tfoot
<table align="center" border="1" width="400" height="200">
<caption>
<h1>
<font color="blue">学生成绩登记表</font>
</h1>
</caption>
<thead>
<tr >
<th>姓名</th>
<th>年龄</th>
<th>成绩</th>
</tr>
</thead>
<tbody>
<tr>
<td>小白白</td>
<td>12</td>
<td>85</td>
</tr>
<tr>
<td>小黑</td>
<td>16</td>
<td>75</td>
</tr>
</tbody>
<tfoot>
<tr>
<!-- 合并三列 -->
<td align="right" colspan="3">------数据来自三年二班</td>
</tr>
</tfoot>
</table>
不规则表格
合并行 合并列的表格就是不规则的
合并行: 当前单元格变高了 rowspan="占几行"
合并列: 当前单元格变宽了 colspan="占几列"
<table width="400" height="400" align="center">
<tr align="center">
<td bgcolor="red" colspan="2">1</td>
<td bgcolor="blue" rowspan="2">2</td>
</tr>
<tr align="center">
<td bgcolor="cyan" rowspan="2">4</td>
<td bgcolor="yellow">5</td>
</tr>
<tr align="center">
<td bgcolor="orange" colspan="2">8</td>
</tr>
</table>