web.jpeg
表格
由table 标签来定义。每个表格均有若干行（由 <tr>标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td指表格数据（table data），即数据单元格的内容
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
在浏览器显示如下：
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2
表格.png
使用.png
表格的属性
-
border边框 默认是 0 -
cellspacing单元格与单元格之间的间距 默认是2px -
cellpadding单元格内容与 单元格 之间的间距 -
align表格的水平对齐方式left,center,right
单元格th 表头的属性
-
colspan跨列合并 -
rowspan跨行合并
th 表头是表格的开头部分一般只有一行
tbody主要是对 表格主题的语义，
应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>金牌</title>
<style>
*{
padding: 0;
margin: 0;
}
table{
margin: 50px 50px;
/*border: 1px solid #cccccc;*/
width: 248px;
height: 190px;
/*合并边框模型*/
border-collapse: collapse;
}
table caption {
height: 30px;
line-height: 30px;
background: url("images/1.gif");
border:1px solid #0CBAFF;
color: white;
text-align: left;
padding-left: 10px;
font-weight: bold;
font-family: Arial;
font-size: 14px;
}
thead {
border: 1px solid #D2E9F6;
background-color:#D2E9F6 ;
}
thead tr {
height: 27px;
}
thead tr th{
font-weight: normal;
font-size: 12px;
}
tbody {
border: 1px solid #CCCCCC;
border-top: none;
}
tbody tr {
border: 1px dotted #cccccc;
}
tbody tr td {
text-align: center;
font-size: 12px;
}
</style>
</head>
<body>
<table >
<caption>金牌top</caption>
<thead>
<tr>
<th>排名</th>
<th>国家</th>
<th>金</th>
<th>银</th>
<th>铜</th>
<th>总计</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>中国</td>
<td>15</td>
<td>14</td>
<td>13</td>
<td>12</td>
</tr>
<tr>
<td>2</td>
<td>德国</td>
<td>14</td>
<td>13</td>
<td>10</td>
<td>8</td>
</tr>
<tr>
<td>3</td>
<td>美国</td>
<td>14</td>
<td>13</td>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>4</td>
<td>中国</td>
<td>14</td>
<td>13</td>
<td>11</td>
<td>12</td>
</tr>
</tbody>
</table>
</body>
</html>
表盒应用.png
网友评论