目录
题目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。