html table
table common tags
1, table tag: declare a table
2, tr tag: define a row in the table
3. td and th tags: define a cell in a row, td represents a normal cell, and th represents a header cell
Common properties
of table: 1. border defines the border of the table
2. cellpadding defines the distance between the content of the cell and the border
3. cellspacing defines the distance between cells
4. align Set the horizontal alignment of the content in the cell, the setting values are: left | center | right
5. valign sets the vertical alignment of the content in the cell top | middle | bottom
6. colspan sets the horizontal merge of cells
7. rowspan sets the vertical merge of cells
Traditional layout:
The traditional layout method is to use table to do the overall page layout. The layout skills are summarized as follows:
1. Define the width and height of the table, and set all border, cellpadding, and cellspacing to 0
2. Nested tables in cells
3. Elements in cells and nested tables are aligned with align and valign
4. Set the style of the elements in the cell through attributes or css styles
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html表格</title>
</head>
<body>
<!-- table>(tr>td*4)*4 -->
<table border="1" cellpadding="10" cellspacing="10">
<tr>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
</tr>
<tr>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
</tr>
<tr>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
</tr>
<tr>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
</tr>
</table>
<h3>html表格</h3>
<table border="1" width="500" height="300">
<tr>
<th>序号</th>
<th>产品名称</th>
<th>产品价格</th>
<th>产品数量</th>
</tr>
<tr align="center">
<td>1</td>
<td>苹果</td>
<td>RMB5.00</td>
<td>1000</td>
</tr>
<tr align="center">
<td>2</td>
<td>橘子</td>
<td>RMB10.00</td>
<td>2000</td>
</tr>
</table>
<h3>个人简历表</h3>
<table border="1" width="600" height="300">
<tr>
<th colspan="5" align="left">基本情况</th>
</tr>
<tr>
<td width="18%">姓名</td>
<td width="18%"></td>
<td width="18%">性别</td>
<td width="18%"></td>
<td rowspan="5"><img src="./images/person.png" alt="图片"></td>
</tr>
<tr>
<td>民族</td>
<td></td>
<td>性别</td>
<td></td>
</tr>
<tr>
<td>政治面貌</td>
<td></td>
<td>性别</td>
<td></td>
</tr>
<tr>
<td>籍贯</td>
<td></td>
<td>性别</td>
<td></td>
</tr>
<tr>
<td>电子邮箱</td>
<td></td>
<td>性别</td>
<td></td>
</tr>
</table>
</body>
</html>Effect picture:
Table traditional layout
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html表格传统布局</title>
<style type="text/css">
body{
font-family: "微软雅黑";
}
.title1{
color: #5f5f5f;
font-size: 24px;
font-weight: bold;
}
.title2{
color: #5f5f5f;
font-size: 18px;
font-weight: bold;
}
td span{
color: #5f5f5f;
font-size: 16px;
font-weight: bold;
}
table .font1{
color: #5f5f5f;
font-size: 16px;
}
.font2{
color: #a7a6a6;
font-size: 16px;
}
td{
line-height: 30px;
}
</style>
</head>
<body>
<table width="800" height="800" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="260" valign="top" bgcolor="#f2f2f2">
<table width="260" border="0" cellpadding="0" cellspacing="0">
<tr height="100">
<td></td>
<td></td>
</tr>
<tr>
<td width="230" align="right"><img src="./images/person.png" alt="人物图片"></td>
<td width="30"></td>
</tr>
<tr>
<td align="right" class="title1">张达山</td>
<td></td>
</tr>
<tr>
<td align="right" class="font2">18210898888</td>
<td></td>
</tr>
<tr>
<td align="right" class="font2">[email protected]</td>
<td></td>
</tr>
</table>
</td>
<td width="30"></td>
<td width="480" valign="top">
<table width="480" border="0" cellpadding="0" cellspacing="0">
<tr height="75">
<td></td>
</tr>
<tr>
<td align="right"><img src="./images/resume.png" alt="图片"></td>
</tr>
</table>
<hr /> <!--画一条线-->
<table width="480" height="180" border="0" cellpadding="0" cellspacing="0" class="font1">
<tr height="30">
<td></td>
<td></td>
</tr>
<tr>
<td colspan="2" class="title2"><b>个人基本情况</b></td>
</tr>
<tr>
<td><span>姓 名：</span>张达山</td>
<td><span>籍 贯：</span>北京昌平</td>
</tr>
<tr>
<td><span>性 别：</span>男</td>
<td><span>身 高：</span>175cm</td>
</tr>
<tr>
<td><span>民 族：</span>汉</td>
<td><span>体 重：</span>70kg</td>
</tr>
<tr>
<td><span>出生日期：</span>1992.03.28</td>
<td><span>电 话：</span>18210898888</td>
</tr>
<tr>
<td><span>专 业：</span>工业设计</td>
<td><span>现居住地：</span>昌平天通苑</td>
</tr>
</table>
<table width="480" height="180" border="0" cellpadding="0" cellspacing="0" class="font1">
<tr height="30">
<td></td>
</tr>
<tr>
<td class="title2">教育背景及工作经历</td>
</tr>
<tr>
<td><span>2008.09-2011.06 </span>北京邮电大学 工业设计专业</td>
</tr>
<tr>
<td><span>2011.06-2012.09</span>北京微创信息科技有限公司 任前端开发工程师</td>
</tr>
<tr height="30">
<td></td>
</tr>
<tr>
<td class="title2">所获证书</td>
</tr>
<tr>
<td><span>2009年：</span>荣获“高级美术设计师”证书</td>
</tr>
<tr>
<td><span>2009年：</span>荣获“优秀班干部”证书</td>
</tr>
</table>
</td>
<td width="30"></td>
</tr>
</table>
</body>
</html>renderings
