合并HTML表格单元格

Question

I'm creating a table in HTML and I'd I am having a hard time using colspan. Here's a rough drawing: How do I create this?

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

This is my code

<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

Check this solution.

• Note #1: consider put a new table inside 3rd TR.
• Note #2: consider using DIVs

 <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

Your design need two many colspan at different places, try to fix column width by adding <col width="25%"> after <table> . below is an example.

 <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>