Как структурировать таблицу html

Question

Я пытаюсь создать таблицу, которая выглядит как картинка, но я не могу понять это ... Это должен быть так просто для вас, но у меня возникают проблемы с тем, чтобы сделать эту работу ... Может кто-нибудь мне помочь? Пожалуйста.

вот мой текущий код для него:

<table width="100%" border="1"> 
<tr> 
<th>Name of Candidates</th> 
<th>Educational Attainment</th> 
<th>Exprerience</th> 
<th>In-Service Trainings & Seminars Attended</th> 
<th>Eligibility</th> 
<th>Other Qualifications</th> 
<th>Interview</th> 
<th>Total</th> 
<th>Remarks</th> 
</tr> 
</table> 

Answer 1

Использование комбинации rowspan и colspan

example

первая строка будет содержать все клетки, которые занимает 2 строки и 1 ячейку, которая распространяется на 4 колонки (серый фон на примере). Вторая строка будет содержать 4 ячейки под ячейкой, которая распространяется на 4 ячейки.

<table> 
    <tr> 
     <td rowspan="2"></td> 
     <td colspan="4"></td> 
     <td rowspan="2"></td> 
     <td rowspan="2"></td> 
     <td rowspan="2"></td> 
     <td rowspan="2"></td> 
    </tr> 
    <tr> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td></td> 
    </tr> 
</table> 

Answer 2

Использование Объединение столбцов увеличить ширину клетки:

colspan="4" 

Documentation colspan

---

Использование RowSpan для увеличения высоты клетки:

rowspan="2" 

Документация rowspan

Answer 3

Здесь вы идете, используйте colspan на несколько колонок.

<table widtd="100%" border="1"> 
    <tr> 
     <td>Name of Candidates</td> 
     <td colspan="4">Educational Attainment</td> 
     <td>Otder Qualifications</td> 
     <td>Interview</td> 
     <td>Total</td> 
     <td>Remarks</td> 
    </tr> 
    <tr> 
     <td>Name of Candidates</td> 
     <td>Educational Attainment</td> 
     <td>Exprerience</td> 
     <td>In-Service Trainings & Seminars Attended</td> 
     <td>Eligibility</td> 
     <td>Otder Qualifications</td> 
     <td>Interview</td> 
     <td>Total</td> 
     <td>Remarks</td> 
    </tr> 
</table> 

Аналогичным образом вы можете использовать rowspan для нескольких рядов.

Answer 4

<table> 
    <tr> 
     <td></td> 
     <td></td> 
     <td colspan="7" rowspan="2"></td> 
     <td></td> 
    </tr> 
    <tr> 
     <td></td> 
     <td></td> 
     <td></td> 
    </tr> 
    <tr> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td></td> 
    </tr> 
    <tr> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td></td> 
    </tr> 
    <tr> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td></td> 
    </tr> 
</table> 

Его хороший помощник для толстого генератора таблицы. http://html-tables.com/