html-表格

案例1:

案例2:

案例3:

<!Doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<table style="margin:0 auto;text-align:center;line-height:30px" cellspacing="0px" bordercolor="#00F" border="1px" width="600px">
<caption><h1>雇员薪资列表</h1></caption>
<!-- th标签是表头 会自动加粗 -->
<tr>
<th>编号</th>
<th>名字</th>
<th>性别</th>
<th>薪水</th>
<th>职位</th>
<th width="35%">电子邮件</th>
</tr>
<tbody>
<tr>
<td>001</td>
<td>张三</td>
<td>男</td>
<td>2000</td>
<td>流寇</td>
<td>123@lk.com</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>1</td>
<td>2</td>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>1</td>
<td>2</td>
<td>1</td>
<td>2</td>
</tr>
</tbody>
</table>
</body>
</html>

表格综合练习-菜谱:

<!Doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<tbody>
<table border="1px" bordercolor="#EEA5FF" width="500px" cellspacing="0px" style="margin:0 auto;line-height:30px;">
<caption><h1>这是一个菜谱</h1></caption>
<tr>
<th colspan="3">菜谱</th>
</tr>
<tr>
<td rowspan="2">素菜</td>
<td>辣炒土豆丝</td>
<td>辣炒腐竹</td>
</tr>
<tr>
<td>辣炒千页豆腐</td>
<td>家常豆腐</td>
</tr>
<tr>
<td rowspan="2">荤菜</td>
<td>小炒肉</td>
<td>水煮肉片</td>
</tr>
<tr>
<td>红烧肉<img src="./hsr.png"></td>
<td>咖喱鸡</td>
</tr>
</table>
</tbody>
</body>
</html>

原文地址:https://www.cnblogs.com/chinablog100/p/6380669.html