一分钟学会写网页表格

旺旺大肉包

已于 2022-09-25 20:31:04 修改

阅读量1.5k

点赞数 5

分类专栏：前端小技巧文章标签： html5

于 2021-05-25 00:02:30 首次发布

本文链接：https://blog.csdn.net/Da_Bao_zi/article/details/117202834

版权

本文介绍了如何在HTML5中创建一个包含合并单元格的表格，包括分析表格结构、设置表格样式以及处理竖直文本的方法。通过rowspan和colspan属性实现单元格的合并，并通过内联样式调整字体竖排，帮助读者在一分钟内掌握网页表格制作。

摘要由CSDN通过智能技术生成

第一步：

类似于制作一个这样的收据，我们需要做的第一步就是分析结构：

左上角的字体分析一下就知道是一个h2标签, 中间的表格中，纵横交错的，分析一下就知道使用了合并，水平合并和垂直合并都有。

那我们就得考虑到表格的单元格该定义为多少。我是把表格分为9行8列，th是表头第一行，tr是列，td是行，表格整体,border设置边框大小为1，边距cellpadding为0，部分代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<table widht="1000px" border="1" cellpadding="0">
	<tr>
    <th></th>
    <th>回单类型</th>
    <th></th>
    <th>网上转账汇款</th>
    <th></th>
    <th>指令序列</th>
    <th></th>
    <th>213254135454</th>
	</tr>

	<tr>
	<td>22</td>
	<td>22</td>
	<td>22</td>
	<td>22</td>
	<td>22</td>
	<td>22</td>
	<td>22</td>
	<td>22</td>
	</tr>
	
	</table>
</body>
</html>

第二部：

当框架搭建出来，就可以考虑设置其他单元格的格式，第一行的水平合并用rowspan 属性和第二行垂直合并用colspan属性部分代码如下