HTML中的table表格布局
HTML中的table表格布局
熟练掌握table表格的布局⽅法，有利于我们今后设计出更加⼯整美观的页⾯，是我们学习HTML必不可少的⼀部分，下⾯我将列出table表格的⼏种常⽤的⽅法。
⼀、table表格布局的基础⽤法
接下来我会⽤⼀段简单代码进⾏演⽰：
<!DOCTYPE html>
<html lang="en">
<head>
html网页设计 table <meta charset="UTF-8">
<title>职⼯</title><!-- ⽹页名称 -->
</head>
<style >
table,td,th{border:1px solid #000;}
table{border-collapse:collapse; }
</style><!-- 这⾥选中td,th统⼀设置表格的边框粗细border，边框实⼼solid，边框颜⾊#000，内外边框是否合并collapse -->
<body><br><br><!-- 下移两格 -->
<table align="center" border="1px"><!-- align设置表格位置在⽹页中间，border设置表格的边框线 -->
<tr ><!-- 第⼀⾏ -->
<th colspan="4">职⼯信息表</th><!-- th加粗居中 -->
</tr><!-- colspan合并第⼀⾏四列的格⼦ -->
<tr align="center"><!-- 第⼆⾏居中 -->
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>职⼯号</th>
</tr>
<tr align="center"><!-- 第三⾏居中 -->
<td>张三</td>
<td>25</td>
<td>男</td>
<th>1</th>
</tr>
<tr align="center"><!-- 第四⾏居中 -->
<td>李四</td>
<td>26</td>
<td>男</td>
<td>2</td>
</tr>
<tr align="center"><!-- 第五⾏居中 -->
<td>林菲</td>
<td>24</td>
<td>⼥</td>
<td>3</td>
</tr>
<tr align="center"><!-- 第六⾏居中 -->
<td>刘铭</td>
<td>24</td>
<td>男</td>
<td>4</td>
</tr>
</table>
</body>
</html>
运⾏结果：
如图，我制作了⼀个简单的6⾏4列的表格，内容也⽐较简单，主要是开头⽤<style>设置表格边框及边框颜⾊的部分需要记忆⼀下关键标签border，collapse。其他的看注释即可明⽩其含义。
列举⼏种常⽤属性及其含义，需要时可直接加⼊标签进⾏设置，⾃⼰亲⼿设计敲出来的才算⾃⼰的；
border-----------边框
height、width--------⾼和宽
align----------------对齐⽅式或位置，可取left  right  center
bgcolor,backcolor----------背景颜⾊，背景图⽚
cellpadding,cellspacing--------表格的边距，表格的间距
⼆、表格的合并
所需关键属性有rowspan,colspan
代码演⽰如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格合并</title>
</head>
<body>
<table border="1px">
<tr>
<td colspan="2">横⾏合并</td>
<td>第⼀⾏</td>
<td>第⼀⾏</td>
</tr>
<tr>
<td rowspan="3">竖<br>列<br>合<br>并</td>
<td>第⼆⾏</td>
<td>第⼆⾏</td>
<td>第⼆⾏</td>
</tr>
<tr>
<td>第三⾏第⼆列</td><!-- 第⼀列已占 -->
<td>第三⾏</td>
<td>第三⾏</td>
</tr>
<tr>
<td>第四⾏第⼆列</td><!-- 第⼀列已占 -->
<td>第四⾏</td>
<td>第四⾏</td>
</tr>
</table>
</body>
</html>
运⾏结果如下：
如图第⼀⾏⼆三列已合并，第⼆三四⾏第⼀列已合并。
三、表格嵌套
代码演⽰如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格嵌套</title>
</head>
<body>
<table border="1px"width="500">
<tr>
<td width="100">  </td>
<td width="400">   
<table border="1px">
<tr>
<td width="100">  </td>
<td width="100">  </td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
运⾏结果：
如图表格内嵌套了另⼀个表格。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。