colspan / rowspan在HTML表中未按预期显示

时间:2019-06-07 18:11:32

标签: html html-table

我已附上这张照片,以正确的格式向您展示问题在问什么。

enter image description here

Click here to see my output with the code used below.

<h1>7.
  <table>
    <tr>
      <th colspan="3">1</th>
    </tr>
    <tr>
      <td rowspan="2">2</td>
      <td>3</td>
      <td>4</td>
    </tr>
    <tr>
      <td>5</td>
      <td>6</td>
    </tr>
  </table>
</h1>

我按照说明使用了rowpan和colspan,但是由于示例所示,我的表仍然缺少较大的空格,因此我正在寻找有关丢失内容的指导。数字正确对齐,只是缺少空格。我知道代码看起来应该不错,但是程序检查器在说这是错误的。

2 个答案:

答案 0 :(得分:-1)

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    table.td {
      bold: normal;
    }
    </style>
    </head>
    
    <body>
    <h1>7</h1>
    <table style="text-align:center;">
    <tr >
        <th colspan="3"><h1>1</h1></th>
    </tr>
    <tr>
        <td rowspan="2"><h1>2</h1></td>
        <td><h1>3</h1></td>
        <td><h1>4</h1></td>
    </tr>
    <tr>
        <td><h1>5</h1></td>
        <td><h1>6</h1></td>
    </tr>
    </table>
    </body>
    </html>

答案 1 :(得分:-1)

table,
td {
  border: 1px solid black;
  font-weight: bold;
  min-height: 128px;
  text-align: center;
}
<table>
  <tr>
    <td colspan="3">1</td>
  </tr>
  <tr>
    <td rowspan="2">2</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>5</td>
    <td>6</td>
  </tr>
</table>