目录
题目1:原始表格
题目2:width、height
题目3: cellpadding
题目4:cellspacing、cellpadding
题目6:rowspan
题目7:colspan
题目8:汇总题
题目1:原始表格
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<table border="5">
<tr>
<td>姓名</td>
<td>语文</td>
<td>数学</td>
</tr>
<tr>
<td>李四</td>
<td>90</td>
<td>95</td>
</tr>
</table>
</body>
</html>
题目2:width、height
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<table border="1" width="100%" height="200">
<tr>
<td>姓名</td>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>合计</td>
</tr>
<tr>
<td>李四</td>
<td>90</td>
<td>95</td>
<td>80</td>
<td>265</td>
</tr>
</table>
</body>
</html>
题目3: cellpadding
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<table border="2" cellpadding="6">
<tr>
<td>姓名</td>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>合计</td>
</tr>
<tr>
<td>李四</td>
<td>90</td>
<td>95</td>
<td>80</td>
<td>265</td>
</tr>
</table>
</body>
</html>
题目4:cellspacing、cellpadding
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<table border="1" cellspacing="0" cellpadding="10">
<tr>
<td>姓名</td>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>合计</td>
</tr>
<tr>
<td>李四</td>
<td>90</td>
<td>95</td>
<td>80</td>
<td>265</td>
</tr>
</table>
</body>
</html>
题目5:caption
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<table border="1" cellpadding="10" cellspacing="0">
<!-- ********* Begin ********* -->
<caption>科目成绩</caption>
<!-- ********* End ********* -->
<tr>
<td>姓名</td>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>合计</td>
</tr>
<tr>
<td>李四</td>
<td>90</td>
<td>95</td>
<td>80</td>
<td>265</td>
</tr>
</table>
</body>
</html>
题目6:rowspan
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<table border="2" cellspacing="0" width="200">
<tr>
<td>商品</td>
<td>数量</td>
<td>单价</td>
<td>备注</td>
</tr>
<tr>
<td>短袖</td>
<td>70</td>
<td>30</td>
<td rowspan="2">无</td>
</tr>
<tr>
<td>裤子</td>
<td>50</td>
<td>30</td>
</tr>
</table>
</body>
</html>
题目7:colspan
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<table border="2" cellspacing="0" width="200">
<tr>
<td>商品</td>
<td>数量</td>
<td>单价</td>
</tr>
<tr>
<td>短袖</td>
<td>70</td>
<td>30</td>
</tr>
<tr>
<td>裤子</td>
<td>50</td>
<td>30</td>
</tr>
<tr>
<td>合计</td>
<td colspan="2">3600</td>
</tr>
</table>
</body>
</html>
题目8:汇总题
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<style>
body{
margin:30px;
}
table{
/*居中对齐*/
text-align:center;
}
</style>
<!--设置表格-->
<table border="2px" width="100%" cellspacing="0" cellpadding="6">
<caption>本周财政计划</caption>
<!-- 第1行 -->
<tr align="center">
<td colspan="2" rowspan="2"> 项目</td>
<td colspan="2">本周发生</td>
<td rowspan="2">备注</td>
</tr>
<!-- 第2行 -->
<tr align="center" >
<td>收入</td>
<td>支出</td>
</tr>
<!-- 第3行 -->
<tr align="center">
<td rowspan="3">收入</td>
<td>贷款收回</td>
<td>8700</td>
<td>0</td>
<td></td>
</tr>
<!-- 第4行 -->
<tr align="center">
<td>内部转款</td>
<td>6000</td>
<td>0</td>
<td></td>
</tr>
<!-- 第5行 -->
<tr align="center">
<td>收入合计</td>
<td>14700</td>
<td>0</td>
<td></td>
</tr>
<!-- 第6行 -->
<tr align="center">
<td rowspan="3">支出</td>
<td>采购支出</td>
<td>0</td>
<td>5000</td>
<td></td>
</tr>
<!-- 第7行 -->
<tr align="center">
<td>工资支出</td>
<td>0</td>
<td>7000</td>
<td></td>
</tr>
<!-- 第8行 -->
<tr align="center">
<td>支出合计</td>
<td>0</td>
<td>12000</td>
<td></td>
</tr>
</table>
</body>
</html>
注意:
要在HTML中设置表格文本水平居中,可以使用CSS样式。具体操作如下:
1. 在<head>标签内添加<style>标签,用于编写CSS样式。
2. 在<style>标签内,为表格的<td>标签设置text-align属性为center。