Question

我正在用HTML创建一个表格，而且我很难使用colspan。这是一张粗略的图纸：我该如何创建它？

______________________________________________________________
|    Project   |                                              |
|              |                CONTENT 1                     |
===============================================================
|                                  |               |          |
|             CONTENT 2            |   CONTENT 3   |          |
===============================================================
|       |        |        |        |       |        |         |
|   C4  |   C5   |    C6  |  C7    |  C9   |  C10   |   C11   |
_______________________________________________________________

这是我的代码

<table align="center" border="1">
  <tr>
    <td>
      Project
    </td>
    <td>
      <input type="text" class="form-control" name="" style="width: 95%;">
    </td>
  </tr>
  <tr>
    <td colspan="2"></td>
    <td>CONTENT 2</td>
    <td>
      <input type="text" class="form-control" name="">
    </td>
  </tr>

</table>

Answer 1

检查此解决方案。

注意＃1：考虑在第3个TR内放置一个新表。
注意＃2：考虑使用DIV

<table width="100%" border="1" cellspacing="10" cellpadding="0">
  <tbody>
    <tr>
      <td colspan="2" align="center" scope="col">Project </td>
      <td colspan="5" align="center" scope="col">CONTENT 1</td>
    </tr>
    <tr>
      <td colspan="4" align="center">CONTENT 2</td>
      <td colspan="2" align="center">CONTENT 3</td>
      <td align="center">&nbsp;</td>
    </tr>
    <tr>
      <td align="center">C4</td>
      <td align="center">C5</td>
      <td align="center">C6</td>
      <td align="center">C7</td>
      <td align="center">C8</td>
      <td align="center">C9</td>
      <td align="center">C10</td>
    </tr>
  </tbody>
</table>

Answer 2

您的设计在不同位置需要两个colspan，尝试在<col width="25%">之后添加<table>来修复列宽。下面是一个例子。

<table border=1 width="100%">
<col width="25%">
  <col width="25%">
  <col width="25%">
  <col width="25%">
  <tr>
    <td>Project   </td>
    <td colspan="3" align="center">CONTENT 1  </td>
  <tr>
    <tr>
    <td colspan="2" align="center">CONTENT 2</td>
    <td align="center">CONTENT 3</td>
    <td></td>
  <tr>
</table>

Answer 3

<center>
    <table width="50%" border="1" style="line-height:5;text-align:center;">
          <tr>
              <td colspan="2" style="border-left: 3px dashed #35272c;border-right: 3px dashed #35272c;">Project</td>
              <td colspan="6" style="border-right: 3px dashed #35272c;">CONTENT 1</td>
          </tr>
          <tr>
              <td colspan="5" style="border-left: 3px dashed #35272c;border-right: 3px dashed #35272c;">CONTENT 2 </td>
              <td colspan="2" style="border-right: 3px dashed #35272c;">CONTENT 3</td>
              <td style="border-right: 3px dashed #35272c;">&nbsp;</td>
          </tr>
          <tr>
              <td style="border-left: 3px dashed #35272c;">C4</td>
              <td>C5</td>
              <td>C6</td>
              <td>C7</td>
              <td>C8</td>
              <td>C9</td>
              <td>C10</td>
              <td style="border-right: 3px dashed #35272c;">C11</td>
          </tr>
    </table>
</center>

合并HTML表格单元格

3 个答案: