表格
2017-04-18 本文已影响0人
洛洛kkkkkk
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>表格</title>
<style type="text/css">
table{
border: 5px red solid;
width: 800px;
height: 580px;
/*合并表格边框*/
border-collapse:collapse;
empty-cells: show;
/*hide 隐藏没有内容的单元格
*/
text-align: center;
/*文字竖直方向（文本属性会继承父级）
需要改变文字竖直居中的时候，不可以写在table里面。因为tbody默认是middle，td会默认继承tbody的样式。
*/
/*vertical-align: ;*/
}
td{
vertical-align: top;
/*border: 1px red solid;*/
}
</style>
</head>
<body>
<!-- 表格 -->
<!-- border 可以给table添加边框，注意：和我们之前在CSS样式里面写的border不是一个东西，border写在标签里代表的是属性。 -->
<!-- 表格的宽和高可以通过 width和height!属性! 来设置，也可以通过CSS样式width和height来设置，同时设置以css为准
可以通过设置表格第一行里面的td或th来设置一列的宽度，总宽度超出整个表格的宽度之后按照比例分配。
可以给每个tr里面的第一个td(或th)设置高度来设置表格每行的高度，总高度超出表格高度之后，会把表格高度撑开。
cellspacing 可以设置单元格之间的间距。（边框合并的情况下无效）
border-collapse:collapse; 合并单元格边框。变成一条线
-->
<table border="1" width="500" height="300" cellspacing="10" cellpadding="50">
<!-- 表格的名字 -->
<caption>成绩</caption>
<!-- 表头 -->
<!-- <thead></thead> -->
<!-- 身体，表格的内容 -->
<!-- thead,tfoot 都不经常使用，可以省略， tbody当我们不写的时候，浏览器会自动给我们添加，所以也可以省略 -->
<!-- <tbody> -->
<!-- tr <table row> 代表的是一行，每行有几个单元格取决于td或者th(第一行的标题) -->
<tr>
<th width="400" height="300" colspan="2">语文 数学</th>
<!-- <th width="300">数学</th> -->
<th width="500" rowspan="2">外语</th>
</tr>
<tr>
<td height="200">100</td>
<td rowspan="3">100</td>
<!-- <td>100</td> -->
</tr>
<tr>
<td height="200">90</td>
<!-- <td>90</td> -->
<td>90</td>
</tr>
<tr>
<td height="200">0</td>
<!-- <td>0</td> -->
<td>0</td>
</tr>
<!-- </tbody> -->
<!-- 表尾 -->
<!-- <tfoot></tfoot> -->
</table>
</body>
</html>
