表格标签

2020-07-15  本文已影响0人  Amanda妍

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>表格标签</title>

</head>

<body>

<!--

tr是块元素 table row 行

th是行元素 table header 表头

td 单元格数据 table data

border:表格的边框

cellspacing:单元格之间的空隙

cellpadding:文本距离单元格边框的距离

thead 、tbody了解即可,是划分数据范围的,thead是表头部分、tbody是数据部分

-->

<table border="2" cellspacing="0" cellpadding="20px" width="400px">

<!--caption 表格的名字-->

<caption>学习表</caption>

<thead>

<tr>

<th>学号</th>

<th>姓名</th>

<th>性别</th>

<th>年龄</th>

</tr>

</thead>

<tbody>

<tr>

<td>1</td>

<td>jane</td>

<td>女</td>

<td>18</td>

</tr>

<tr>

<td>2</td>

<td>lily</td>

<td>女</td>

<td>19</td>

</tr>

<tr>

<td>3</td>

<td>tom</td>

<td>男</td>

<td>20</td>

</tr>

<tr>

<td>4</td>

<td>Bank</td>

<td>男</td>

<td>21</td>

</tr>

</tbody>

</table>

<!------------------------------------------------------------------------>

<!--table 单元格合并-->

<table border="1px" cellpadding="10px" cellspacing="0" >

<tr>

<td colspan="2">单元格1</td>

<!--<td>单元格2</td>-->

<td></td>

<td>单元格4</td>

<td rowspan="2">单元格5</td>

</tr>

<tr>

<td>单元格1</td>

<td>单元格2</td>

<td></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>

<tr>

<td colspan="5">单元格1</td>

<!--<td>单元格2</td>

<td>单元格3</td>

<td>单元格4</td>

<td>单元格5</td>-->

</tr>

<tr>

<td>单元格1</td>

<td rowspan="3">单元格2</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>

<tr>

<td>单元格1</td>

<!--<td>单元格2</td>-->

<td>单元格3</td>

<td>单元格4</td>

<td>单元格5</td>

</tr>

</table>

上一篇 下一篇

猜你喜欢

热点阅读