时间戳

首页 > 解决方案 > 如何创建具有特定行和列的 html 表

html - 如何创建具有特定行和列的 html 表

问题描述

我在创建一个包含特定细节的小表格时遇到问题，如图片中的在此处输入图像描述

我做了这段代码，但没有给出想要的结果

<html>
<head>
 <style>
       table,td,th{border: 2px solid gray; text-align:center}
      </style>
</head>
<body>
<table width="30%">
<tr>
<td colspan="4">1</td>
<td colspan="3">2</td>
</tr>
<tr>
<td>3</td>
<td rowspan="2" colspan="8">4</td>
</tr>
<tr>
<td>5</td>
</tr>
<tr>
<td colspan="4">6<td>
<td>7<td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
</table>
</body>
</html>

标签： htmlhtml-table

解决方案

使用</td>而不是<td>框 6 和 7 的结束标签。框 2 的 colspan 不是必需的。其他三个 colspan 太大了。这段代码应该让您看到图 2。

    <table width="30%">
      <tr>
        <td colspan="3">1</td>
        <td>2</td>
      </tr>
      <tr>
        <td>3</td>
        <td rowspan="2" colspan="3">4</td>
      </tr>
      <tr>
        <td>5</td>
      </tr>
      <tr>
        <td colspan="2">6</td>
        <td>7</td>
        <td>8</td>
      </tr>
      <tr>
        <td>9</td>
        <td>10</td>
        <td>11</td>
        <td>12</td>
      </tr>
    </table>

推荐阅读