Блог

Главная - Вопросы по программированию - Разделение ячейки в таблице

Разделение ячейки в таблице

#html #html-table #cell #divide

#HTML #html-таблица #ячейка #разделить

Вопрос:

Мне нужно разделить ячейку таким образом, чтобы она имела 1 заголовок сверху и 2 под ним в html, не нарушая работу остальной части таблицы. пример таблицы

Я пытался создать вложенную таблицу и поиграть с colspan и rowspan, но я новичок в этом и не понял все правильно.

Комментарии:

1. Проверьте rowspan и colspan , но если вы пытаетесь создать макет, используйте display: grid вместо этого. w3schools.com/html/html_table_colspan_rowspan.asp

Ответ №1:

Вы можете использовать следующий код для отображения этого стиля в таблице:

 <!DOCTYPE html>
<html>
<head>
 <style>
   table,th,td {
      border: 1px solid black;
      border-collapse:collapse;
    }
 </style>
</head>
<body>
<table width="600">
 <caption>Student's Info</caption>
  <tr>
    <th rowspan="2" width="20%">Name</th>
   <th rowspan="2" width="20%">Class</th>
   <th colspan="2" width="30%">Parents</th>
   <th rowspan="2" width="30%">Roll No.</th>
   </tr>
  <tr>
    <th>Father</th>
    <th>Mother</th>
  </tr>
  <tr>
    <td>A</td>
    <td>10</td>
    <td colspan="2">X and Y</td>
    <td>1</td>
  </tr>
  <tr>
    <td>B</td>
    <td>10</td>
    <td colspan="2">F and G</td>
    <td>2</td>
  </tr>
 </table>

</body>
</html>

Метки: