Таблицы, строки и colspan - PullRequest
Новая
       1

Таблицы, строки и colspan

2 голосов
/ 11 апреля 2020

Это мой код этой таблицы прилагается. У меня проблема, потому что мой стол не такой, как я хотел. Я новичок в html5, и у меня действительно есть проблемы с rowspan и colspan. Любые уловки, чтобы лучше узнать о rowspan и colspan и как я могу сделать таблицу так, как я хочу. 

table,
td,
th {
  border: 1px solid #666;
  border-collapse: collapse;
}
<table>
  <tr>
    <th colspan="2">Hi</th>
    <th>Hi</th>
  </tr>
  <tr>
    <td>Hi</td>
    <td>Hi</td>
    <td>hi</td>
  </tr>
  <tr>
    <td>Hi</td>
    <td>Hi</td>
    <td>hi</td>
    <td>hi</td>
  </tr>
</table>

image

Ответы [ 2 ]

2 голосов
/ 11 апреля 2020

Вам необходимо добавить colspan для последней ячейки в заголовке и последней ячейки в первой строке тела таблицы, в противном случае сумма столбцов будет для них только 3 (на основе colspan). 

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <style>
    table,
    td,
    th {
      border: 1px solid #666;
      border-collapse: collapse;
    }
  </style>
  <title>Assignment 4</title>
</head>

<body>
  <table>
    <tr>
      <th colspan="2">Hi</th>
      <th colspan="2">Hi</th>
    </tr>
    <tr>
      <td>Hi</td>
      <td>Hi</td>
      <td colspan="2">hi</td>
    </tr>
    <tr>
      <td>Hi</td>
      <td>Hi</td>
      <td>hi</td>
      <td>hi</td>
    </tr>
  </table>


</body>

</html>
0 голосов
/ 11 апреля 2020

Попробуйте использовать это 

<!DOCTYPE html>
<html>
<head>
<style> 
table,
td,
th {
  border: 1px solid #666;
  border-collapse: collapse;
}


</style>
</head>
<body>

<table>
  <tr>
    <th colspan="2">Hi</th>
    <th colspan="2">Hi</th>
  </tr>
  <tr>
    <td>Hi</td>
    <td >Hi</td>
    <td colspan="2">hi</td>
  </tr>
  <tr>
    <td>Hi</td>
    <td>Hi</td>
    <td>hi</td>
    <td>hi</td>

  </tr>
</table>

</body>
</html>

Короче говоря colspan и rowspan означает объединение столбцов или строк соответственно.

...