表格
table是表格的区域 table的html属性
- width
- height
- border
- cellspacing 单元格与单元格之间的
- cellpadding 单元格与内容之间的间距
tr行的html属性
- align 单元格内内容的水平对齐方式
- left
- right
- center
- valign 单元格内容的垂直对齐方式
- top
- bottom
- middle
td单元格html属性
- rowspan 向下合并
- colspan向右合并
单元格合并
- 合并的时候总是向下或者向右
- 合并几个单元格, 属性就写几个
- 把多余的单元格注释掉
<table width="500px" height="400px" cellspacing="0"
cellpadding="0" border="1">
<tr align="left" valign="top" >
<td>1</td>
<td>2</td>
<td>3</td>
<td rowspan="2">4</td>
</tr>
<tr>
<td colspan="2">1</td>
<td>2</td>
<!-- <td>3</td> -->
<!-- <td>4</td> -->
</tr>
<tr>
<td colspan="2">1</td>
<!-- <td>2</td> -->
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</table>
表格的进阶标签
table
- 表格的标题caption
- 数据列分组colgroup
- -span=2 把两列分为一组
- 数据行分组
- thead 表格的头部
- tbody 表格的主体
- tfoot 表格的底部
- 必须宝行有一个tr
- tbody可以有多个thead和tfoot只能有一个
- tr每一行
- th表头单元格 自带加粗居中效果
- td 普通单元格
<style>
/* 基础样式 */
table {
width: 500px;
height: 400px;
}
table,
td {
border: 1px solid #000;
}
.foot {
background-color: cyan;
text-align: center;
}
/* 进阶样式 */
caption {
height: 100px;
background-color: cyan;
font-size: 40px;
line-height: 100px;
}
.col1 {
background-color: pink;
}
.col2 {
background-color: green;
}
th {
height: 80px;
border: 1px solid #000;
}
tr {
text-align: center;
}
</style>
<table cellspacing="0">
<caption>我是展示信息的表格</caption>
<colgroup span="2" class="col1"></colgroup>
<colgroup span="2" class="col2"></colgroup>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>兴趣爱好</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</tbody>
<tfoot>
<tr class="foot">
<td colspan="4">1</td>
</tr>
</tfoot>
</table>
表格的css属性
- 单元格与单元格之间的间距–分离模式
- border-spacing: 0px
- 单元格是分离模式还是合并模式
- border-collapse
- 分离模式 默认
- 合并模式collapse
- 分离模式 默认
- border-collapse
- 单元格是否隐藏–分离模式下
- empty-cells
- 出现 默认
- hide隐藏
- 出现 默认
- empty-cells
- 表格布局算法
- table-layout
- auto 表格宽度靠内容决定 默认
- fixed 表格宽度固定
- table-layout
<style>
table {
width: 500px;
height: 400px;
}
table,
td {
border: 1px solid #000;
}
table {
border-spacing: 0px;
/* border-collapse: collapse; */
empty-cells: hide;
table-layout: fixed;
}
</style>
<table>
<tr>
<td></td>
<td>222222222</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</table>