在HTML中，创建表格是相当简单的，合并表格的单元格则稍微复杂一些，下面将详细介绍如何在HTML中制作一个表格，并合并其中的两格。
1. 创建表格
我们需要使用<table>标签来创建一个表格，这个标签内部可以包含多个<tr>标签，每个<tr>标签代表表格的一行，每一行又可以包含多个<td>标签，每个<td>标签代表表格的一个单元格。
我们可以创建一个3行4列的表格：
<table>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
<tr>
<td>Cell 5</td>
<td>Cell 6</td>
<td>Cell 7</td>
<td>Cell 8</td>
</tr>
<tr>
<td>Cell 9</td>
<td>Cell 10</td>
<td>Cell 11</td>
<td>Cell 12</td>
</tr>
</table>
2. 合并单元格
要合并单元格，我们需要使用rowspan和colspan属性。rowspan属性用于指定一个单元格应该横跨多少行，而colspan属性用于指定一个单元格应该横跨多少列，这两个属性的值都是数字。
我们可以将上述表格中的第2行的第2列和第3列的单元格合并：
<table>
<tr>
<td>Cell 1</td>
<td rowspan="2">Cell 2 and Cell 3</td>
<td rowspan="2">Cell 4 and Cell 5</td>
</tr>
<tr>
<td colspan="2">Cell 6 and Cell 7</td>
</tr>
<tr>
<td>Cell 9</td>
<td rowspan="2">Cell 10 and Cell 11</td>
<td rowspan="2">Cell 12 and Cell 13</td>
</tr>
</table>
在这个例子中，我们使用了rowspan="2"和colspan="2"来合并第2行的第2列和第3列的单元格，以及第3行的第2列和第3列的单元格，这样，我们就得到了一个3行3列的表格，其中有两个单元格被合并了。
3. CSS样式
如果你想改变合并后的单元格的样式，你可以使用CSS，你可以使用background-color属性来改变背景颜色，使用font-weight属性来改变字体粗细，等等。
我们可以将上述表格中的合并单元格的背景颜色设置为浅蓝色：
<style>
table {border-collapse: collapse;}
th, td {border: 1px solid black;}
tr:nth-child(2) > td:nth-child(2), tr:nth-child(2) > td:nth-child(3), tr:nth-child(3) > td:nth-child(2), tr:nth-child(3) > td:nth-child(3) {background-color: lightblue;}
</style>
<table>
<tr>
<td>Cell 1</td>
<td rowspan="2">Cell 2 and Cell 3</td>
<td rowspan="2">Cell 4 and Cell 5</td>
</tr>
<tr>
<td colspan="2">Cell 6 and Cell 7</td>
</tr>
<tr>
<td>Cell 9</td>
<td rowspan="2">Cell 10 and Cell 11</td>
<td rowspan="2">Cell 12 and Cell 13</td>
</tr>
</table>
HTML相关问题与解答：
问题1：如何设置表格的边框？
答：你可以通过CSS来设置表格的边框，你可以使用border属性来设置边框的宽度和颜色，使用border-collapse属性来决定是否应该将相邻的边框合并为一个单一的边框，等等，以下代码将创建一个带有黑色边框的表格：<table style="border:1px solid black; border-collapse: collapse;">...</table>。
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/185000.html
微信扫一扫 