Конспект: Таблици

ссылки

https://htmlacademy.ru/

1	https://htmlacademy.ru/

Простейшая таблица

Простейшая таблица описывается с помощью трёх тегов:
<table> обозначает таблицу.
<tr> расшифровывается как «table row», обозначает строку таблицы.
<td> расшифровывается как «table data», обозначает ячейку внутри строки таблицы.
Теги <td> располагаются внутри тегов <tr>, а те, в свою очередь, внутри <table>. 
Почти всё текстовое содержимое таблицы размещается внутри тегов <td>.
В простейшей таблице в каждой строке должно быть одинаковое количество ячеек, то есть внутри всех <tr> должно быть одинаковое количество <td>.
Для того чтобы добавить столбец в таблицу, надо в каждую строку <tr> добавить по ячейке <td>

Простейшая таблица описывается с помощью трёх тегов:

<table> обозначает таблицу.

<tr> расшифровывается как «table row», обозначает строку таблицы.

<td> расшифровывается как «table data», обозначает ячейку внутри строки таблицы.

Теги <td> располагаются внутри тегов <tr>, а те, в свою очередь, внутри <table>.

Почти всё текстовое содержимое таблицы размещается внутри тегов <td>.

В простейшей таблице в каждой строке должно быть одинаковое количество ячеек, то есть внутри всех <tr> должно быть одинаковое количество <td>.

Для того чтобы добавить столбец в таблицу, надо в каждую строку <tr> добавить по ячейке <td>

Пример

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Простейшая таблица</title>
  </head>
  <body>
  <h1>Распределение браузеров</h1>
     <table border="1">
      <tr>
        <td>Браузер</td>
        <td>Посещения</td>
      </tr>
      <tr>
        <td>Mozilla Firefox</td>
        <td>163</td>
      </tr>
      <tr>
        <td>Google Chrome</td>
        <td>78</td>
      </tr>
      <tr>
        <td>Safari</td>
        <td>35</td>
      </tr>
    </table>
   </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Простейшая таблица</title>

</head>

<body>

<h1>Распределение браузеров</h1>

<tr>

<td>Браузер</td>

<td>Посещения</td>

</tr>

<tr>

<td>Mozilla Firefox</td>

</tr>

<tr>

<td>Google Chrome</td>

</tr>

<tr>

<td>Safari</td>

</tr>

</table>

</body>

</html>

Задаём рамки с помощью CSS

Таблицы в предыдущих заданиях отображались с рамками по умолчанию. 
Такие рамки отображаются, если у тега <table> задан атрибут border с ненулевым значением.
Но с помощью атрибута border гибко управлять рамками не получается. 
С его помощью можно только изменять их толщину.

Таблицы в предыдущих заданиях отображались с рамками по умолчанию.

Такие рамки отображаются, если у тега <table> задан атрибут border с ненулевым значением.

Но с помощью атрибута border гибко управлять рамками не получается.

С его помощью можно только изменять их толщину.

Улучшаем отображение рамок

По умолчанию браузер рисует рамки таблицы и рамки отдельных ячеек раздельно, это отлично видно на примере.
Чтобы избавиться от таких двойных рамок, используется CSS-свойство таблицы border-collapse. 
Вот так:

table {
  border-collapse: collapse;
}

Значение collapse убирает двойные рамки: 
схлопываются рамки соседних ячеек, а также рамки ячеек и внешняя рамка таблицы. 
При этом внешняя рамка таблицы может исчезнуть, и чтобы её вернуть, можно увеличить её ширину.

По умолчанию браузер рисует рамки таблицы и рамки отдельных ячеек раздельно, это отлично видно на примере.

Чтобы избавиться от таких двойных рамок, используется CSS-свойство таблицы border-collapse.

Вот так:

table {

border-collapse: collapse;

}

Значение collapse убирает двойные рамки:

схлопываются рамки соседних ячеек, а также рамки ячеек и внешняя рамка таблицы.

При этом внешняя рамка таблицы может исчезнуть, и чтобы её вернуть, можно увеличить её ширину.

Горизонтальные и вертикальные рамки

Иногда требуется, чтобы рамки ячеек в таблице отображались не полностью. 
Например, чтобы отображалась только нижняя рамка ячеек, тогда таблица получается расчерченной по горизонтали. 
Аналогично, если отображать только боковые рамки ячеек, то таблица получается разбитой на столбцы.
Такие эффекты легко достигаются с помощью CSS. 

Для этого необходимо использовать не свойство border, которое задаёт рамки для всех сторон ячейки, а одно из свойств:
border-top,
border-right,
border-bottom,
border-left.

Эти свойства задают отображение только одной рамки ячейки: 
верхней, правой, нижней или левой соответственно.

table {
  border-collapse: collapse;
  border: 3px solid black;
}

td {
  border: 2px solid lightgray;
}

.td_black {
border-top: 1px solid black;
}

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

Например, чтобы отображалась только нижняя рамка ячеек, тогда таблица получается расчерченной по горизонтали.

Аналогично, если отображать только боковые рамки ячеек, то таблица получается разбитой на столбцы.

Такие эффекты легко достигаются с помощью CSS.

Для этого необходимо использовать не свойство border, которое задаёт рамки для всех сторон ячейки, а одно из свойств:

border-top,

border-right,

border-bottom,

border-left.

Эти свойства задают отображение только одной рамки ячейки:

верхней, правой, нижней или левой соответственно.

table {

border-collapse: collapse;

border: 3px solid black;

}

td {

border: 2px solid lightgray;

}

.td_black {

border-top: 1px solid black;

}

Отступы между ячейками

Большинство задач по оформлению таблиц решаются с помощью работы с рамками, отступами внутри ячеек, изменения цвета фона ячеек.
Помимо внутренних отступов можно задавать отступы между ячейками таблицы.
Отступы между ячейками не работают с border-collapse: 
collapse, что достаточно логично, ведь рамки ячеек в этом режиме «склеены» и их не разорвать.

Отступы между ячейками можно задать:
с помощью атрибута cellspacing тега <table>
или c помощью CSS-свойства border-spacing.
Отметим, что свойство border-spacing задаётся для таблицы, в отличие от padding, которое задаётся для ячеек.

Большинство задач по оформлению таблиц решаются с помощью работы с рамками, отступами внутри ячеек, изменения цвета фона ячеек.

Помимо внутренних отступов можно задавать отступы между ячейками таблицы.

Отступы между ячейками не работают с border-collapse:

collapse, что достаточно логично, ведь рамки ячеек в этом режиме «склеены» и их не разорвать.

Отступы между ячейками можно задать:

с помощью атрибута cellspacing тега <table>

или c помощью CSS-свойства border-spacing.

Отметим, что свойство border-spacing задаётся для таблицы, в отличие от padding, которое задаётся для ячеек.

Ячейки-заголовки

Поздравляем! Вы научились создавать простейшие таблицы и оформлять их. 
В следующей части курса мы познакомимся с ещё несколькими табличными тегами и научимся создавать более сложные таблицы.
Обычно в таблицах выделяют названия столбцов или строк.
В HTML для этого предусмотрен специальный тег <th>, который расшифровывается как «table header» и обозначает ячейку-заголовок. 
Тег <th> аналогичен <td>, он так же должен располагаться внутри <tr>, для него стилями можно задавать все те же свойства.
По умолчанию текст внутри <th> выделяется жирным и выравнивается по центру ячейки.

Поздравляем! Вы научились создавать простейшие таблицы и оформлять их.

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

Обычно в таблицах выделяют названия столбцов или строк.

В HTML для этого предусмотрен специальный тег <th>, который расшифровывается как «table header» и обозначает ячейку-заголовок.

Тег <th> аналогичен <td>, он так же должен располагаться внутри <tr>, для него стилями можно задавать все те же свойства.

По умолчанию текст внутри <th> выделяется жирным и выравнивается по центру ячейки.

Заголовок таблицы

В предыдущем задании вы создали заголовочные ячейки с помощью подходящих тегов, в этом задании мы создадим подпись к таблице (или заголовок таблицы).
Сейчас подпись Распределение браузеров сделана с помощью заголовка первого уровня. 
В принципе, можно догадаться, что это название таблицы, но семантически правильнее будет сделать это название с помощью тега <caption>.
Тег <caption> должен размещаться внутри тега <table>, причём непосредственно внутри него и первым, до остальных вложенных тегов. 

Вот так:
<table>
  <caption>Текст</caption>
  ...
 </table>

Тег заголовка идёт первым внутри таблицы, но с помощью CSS можно переместить заголовок таблицы в любое место: сверху или снизу таблицы, по центру, справа или слева.
По вертикали заголовок таблицы перемещается CSS-свойством caption-side со значениями top и bottom, которые обозначают до и после таблицы соответственно.
По горизонтали заголовок таблицы выравнивается CSS-свойством text-align со значениями left, right и center.

caption {
  caption-side: bottom;
  text-align: right;
}

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

Сейчас подпись Распределение браузеров сделана с помощью заголовка первого уровня.

В принципе, можно догадаться, что это название таблицы, но семантически правильнее будет сделать это название с помощью тега <caption>.

Тег <caption> должен размещаться внутри тега <table>, причём непосредственно внутри него и первым, до остальных вложенных тегов.

Вот так:

<table>

<caption>Текст</caption>

...

</table>

Тег заголовка идёт первым внутри таблицы, но с помощью CSS можно переместить заголовок таблицы в любое место: сверху или снизу таблицы, по центру, справа или слева.

По вертикали заголовок таблицы перемещается CSS-свойством caption-side со значениями top и bottom, которые обозначают до и после таблицы соответственно.

По горизонтали заголовок таблицы выравнивается CSS-свойством text-align со значениями left, right и center.

caption {

caption-side: bottom;

text-align: right;

}

Объединяем ячейки в строках

Чтобы объединить ячейки по горизонтали, необходимо использовать атрибут colspan у тегов <th> или <td>.
Когда вы задаёте ячейке атрибут colspan со значением 2, то ячейка как бы «растягивается» на ячейку справа, 
но та ячейка не исчезает, а отодвигается и в таблице появляется новый столбец. 
Чтобы удалить его, нужно удалить ячейку, которая находится справа от «растянутой».


<table>
      <caption>Распределение браузеров</caption>
      <tr>
        <th>Браузер</th>
        <th colspan="2">Посещения</th>
        <th> можно удалить </th>
              </tr>
      <tr>
        <th></th>
        <th>Количество</th>
        <th>В процентах</th>
      </tr>
      <tr>
        <td>Mozilla Firefox</td>
        <td>163</td>
        <td>59%</td>
      </tr>
      <tr>
        <td>Google Chrome</td>
        <td>78</td>
        <td>28%</td>
      </tr>
      <tr>
        <td>Safari</td>
        <td>35</td>
        <td>13%</td>
      </tr>
    </table>

Чтобы объединить ячейки по горизонтали, необходимо использовать атрибут colspan у тегов <th> или <td>.

Когда вы задаёте ячейке атрибут colspan со значением 2, то ячейка как бы «растягивается» на ячейку справа,

но та ячейка не исчезает, а отодвигается и в таблице появляется новый столбец.

Чтобы удалить его, нужно удалить ячейку, которая находится справа от «растянутой».

<table>

<caption>Распределение браузеров</caption>

<tr>

<th>Браузер</th>

<th colspan="2">Посещения</th>

<th> можно удалить </th>

</tr>

<tr>

<th>Количество</th>

<th>В процентах</th>

</tr>

<tr>

<td>Mozilla Firefox</td>

</tr>

<tr>

<td>Google Chrome</td>

</tr>

<tr>

<td>Safari</td>

</tr>

</table>

Объединяем ячейки в столбцах

Объединение ячеек по вертикали немного сложнее. 
Оно осуществляется с помощью атрибута rowspan у тега <td> или <th>.
Когда вы задаёте ячейке атрибут rowspan со значением 2, то ячейка как бы «растягивается» на следующую строку. 
При этом ячейка, которая была под «растянутой» отодвигается в своей же строке вправо, что добавляет в таблицу лишний столбец. 
Удалив ячейку, которая была под «растянутой», мы избавимся от этого столбца.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Объединяем ячейки в столбцах</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <table>
      <caption>Распределение браузеров</caption>
      <tr>
        <th rowspan="2">Браузер</th>
        <th colspan="2">Посещения</th>
      </tr>
      <tr>
        <th class="pink"></th>
        <th>Количество</th>
        <th>В процентах</th>
      </tr>
      <tr>
        <td>Mozilla Firefox</td>
        <td>163</td>
        <td>59%</td>
      </tr>
      <tr>
        <td>Google Chrome</td>
        <td>78</td>
        <td>28%</td>
      </tr>
      <tr>
        <td>Safari</td>
        <td>35</td>
        <td>13%</td>
      </tr>
    </table>
  </body>
</html>


table {
  border-collapse: separate;
  border-spacing: 4px;
  border: 2px solid black;
}

td {
  padding: 5px;
  padding-right: 30px;
  border: 1px solid lightgray;
}

th {
  padding: 10px;
  border: 1px solid black;
}

caption {
  margin-bottom: 10px;
  font-size: 18px;
}

.pink {
  background-color: pink;
}

Объединение ячеек по вертикали немного сложнее.

Оно осуществляется с помощью атрибута rowspan у тега <td> или <th>.

Когда вы задаёте ячейке атрибут rowspan со значением 2, то ячейка как бы «растягивается» на следующую строку.

При этом ячейка, которая была под «растянутой» отодвигается в своей же строке вправо, что добавляет в таблицу лишний столбец.

Удалив ячейку, которая была под «растянутой», мы избавимся от этого столбца.

<!DOCTYPE html>

<html>

<head>

<title>Объединяем ячейки в столбцах</title>

</head>

<body>

<table>

<caption>Распределение браузеров</caption>

<tr>

<th rowspan="2">Браузер</th>

<th colspan="2">Посещения</th>

</tr>

<tr>

<th>Количество</th>

<th>В процентах</th>

</tr>

<tr>

<td>Mozilla Firefox</td>

</tr>

<tr>

<td>Google Chrome</td>

</tr>

<tr>

<td>Safari</td>

</tr>

</table>

</body>

</html>

table {

border-collapse: separate;

border-spacing: 4px;

border: 2px solid black;

}

td {

padding: 5px;

padding-right: 30px;

border: 1px solid lightgray;

}

th {

padding: 10px;

border: 1px solid black;

}

caption {

margin-bottom: 10px;

font-size: 18px;

}

.pink {

background-color: pink;

}

Комбо: colspan + rowspan

Можно растягивать ячейку одновременно и по вертикали, и по горизонтали.
Для этого нужно задать ячейке два атрибута: rowspan и colspan.

Вытеснение соседних ячеек будет происходить так же, как и при обычном объединении ячеек. 
Правда, вытесненных ячеек окажется больше. 
Например, ячейка с rowspan="2" и colspan="2" вытеснит три соседних ячейки.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Комбо: colspan + rowspan</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <table>
      <tr>
        <td colspan="2" rowspan="2">1.1</td>
        <td class="pink">1.2</td>
        <td>1.3</td>
      </tr>
      <tr>
        <td class="pink">2.1</td>
        <td class="pink">2.2</td>
        <td>2.3</td>
      </tr>
      <tr>
        <td>3.1</td>
        <td>3.2</td>
        <td>3.3</td>
      </tr>
    </table>
  </body>
</html>



table {
  border-collapse: separate;
  border-spacing: 4px;
  border: 2px solid black;
}

td {
  padding: 5px;
  padding-right: 30px;
  border: 1px solid lightgray;
}

.pink {
  background-color: pink;
}

Можно растягивать ячейку одновременно и по вертикали, и по горизонтали.

Для этого нужно задать ячейке два атрибута: rowspan и colspan.

Вытеснение соседних ячеек будет происходить так же, как и при обычном объединении ячеек.

Правда, вытесненных ячеек окажется больше.

Например, ячейка с rowspan="2" и colspan="2" вытеснит три соседних ячейки.

<!DOCTYPE html>

<html>

<head>

<title>Комбо: colspan + rowspan</title>

</head>

<body>

<table>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

table {

border-collapse: separate;

border-spacing: 4px;

border: 2px solid black;

}

td {

padding: 5px;

padding-right: 30px;

border: 1px solid lightgray;

}

.pink {

background-color: pink;

}

Выравнивание содержимого в ячейках

Выравнивание содержимого в ячейках
Содержимое ячеек можно выравнивать по горизонтали и по вертикали с помощью CSS.
За выравнивание по горизонтали отвечает CSS-свойство text-align. 
Чаще всего используются значения left, center и right.

За выравнивание по вертикали отвечает CSS-свойство vertical-align. 
Чаще всего используются значения top, middle и bottom.

На самом деле, значений у обоих свойств больше, но в случае с ячейками нас интересуют только перечисленные.
Чтобы задать выравнивание содержимого ячеек, надо в стилях указать:

 {
  vertical-align: значение;
  text-align: значение;
}

Эти стили повлияют на все ячейки. Чтобы задать выравнивание только в определённых ячейках, нужно назначить им классы и определить стили для классов.

Выравнивание содержимого в ячейках

Содержимое ячеек можно выравнивать по горизонтали и по вертикали с помощью CSS.

За выравнивание по горизонтали отвечает CSS-свойство text-align.

Чаще всего используются значения left, center и right.

За выравнивание по вертикали отвечает CSS-свойство vertical-align.

Чаще всего используются значения top, middle и bottom.

На самом деле, значений у обоих свойств больше, но в случае с ячейками нас интересуют только перечисленные.

Чтобы задать выравнивание содержимого ячеек, надо в стилях указать:

{

vertical-align: значение;

text-align: значение;

}

Эти стили повлияют на все ячейки. Чтобы задать выравнивание только в определённых ячейках, нужно назначить им классы и определить стили для классов.

Добавим цвета

 Таблицы можно раскрашивать, задавая цвет фона ячеек, цвет текста в ячейках, а также цвет рамок. 
Можно задавать и фоновые изображения.

Цветами можно управлять с помощью этих свойств:
background-color — задаёт цвет фона,
color — цвет текста,
border-color — цвет рамок.

До этого мы использовали компактную форму для описания рамок: 
border: 1px solid lightgray;

Таким образом, чтобы задать цвета для ячейки в CSS, нужен такой код:
td {
  color: цвет;
  background-color: цвет;
  border: 1px solid цвет;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Добавим цвета</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <table>
      <caption>Распределение браузеров</caption>
      <tr>
        <th rowspan="2">Браузер</th>
        <th colspan="2">Посещения</th>
      </tr>
      <tr>
        <th>Количество</th>
        <th>В процентах</th>
      </tr>
      <tr>
        <td>Mozilla Firefox</td>
        <td>126</td>
        <td>59%</td>
      </tr>
      <tr>
        <td>Google Chrome</td>
        <td>78</td>
        <td>30%</td>
      </tr>
      <tr>
        <td>Safari</td>
        <td>34</td>
        <td>11%</td>
      </tr>
    </table>
  </body>
</html>

table {
  border-collapse: collapse;
  border: 2px solid black;
  border-color: red;
}

td {
  padding: 5px;
  padding-right: 10px;
  border: 1px solid lightgray;
  color: brown;
  background-color: lightyellow;
  border-color: green;
}

th {
  padding: 10px;
  border: 1px solid black;
  color: darkblue;
  background-color: lightcyan;
  border-color: yellow;
}

caption {
  margin-bottom: 10px;
  font-size: 18px;
}


Как быть, если стили нужно задать для какой-то определённой ячейки, группы ячеек, или строки? 
Можно использовать классы и применять стили для этих классов. 

Например, вот так:
.my-class {
  стили
}

Таблицы можно раскрашивать, задавая цвет фона ячеек, цвет текста в ячейках, а также цвет рамок.

Можно задавать и фоновые изображения.

Цветами можно управлять с помощью этих свойств:

background-color — задаёт цвет фона,

color — цвет текста,

border-color — цвет рамок.

До этого мы использовали компактную форму для описания рамок:

border: 1px solid lightgray;

Таким образом, чтобы задать цвета для ячейки в CSS, нужен такой код:

td {

color: цвет;

background-color: цвет;

border: 1px solid цвет;

}

<!DOCTYPE html>

<html>

<head>

<title>Добавим цвета</title>

</head>

<body>

<table>

<caption>Распределение браузеров</caption>

<tr>

<th rowspan="2">Браузер</th>

<th colspan="2">Посещения</th>

</tr>

<tr>

<th>Количество</th>

<th>В процентах</th>

</tr>

<tr>

<td>Mozilla Firefox</td>

</tr>

<tr>

<td>Google Chrome</td>

</tr>

<tr>

<td>Safari</td>

</tr>

</table>

</body>

</html>

table {

border-collapse: collapse;

border: 2px solid black;

border-color: red;

}

td {

padding: 5px;

padding-right: 10px;

border: 1px solid lightgray;

color: brown;

background-color: lightyellow;

border-color: green;

}

th {

padding: 10px;

border: 1px solid black;

color: darkblue;

background-color: lightcyan;

border-color: yellow;

}

caption {

margin-bottom: 10px;

font-size: 18px;

}

Как быть, если стили нужно задать для какой-то определённой ячейки, группы ячеек, или строки?

Можно использовать классы и применять стили для этих классов.

Например, вот так:

.my-class {

стили

}

Задаём размеры таблицы

По умолчанию ширина и высота таблицы зависит от содержимого и отступов внутри ячеек. 
Чем меньше содержимого, тем меньше размеры таблицы.
С помощью CSS можно управлять размерами таблицы, задавать желаемую ширину и высоту. 
Также размерами можно управлять с помощью атрибутов таблицы, но мы рассмотрим только CSS.
Стоит отметить, что у таблицы есть минимальные размеры, которые зависят от содержания, меньше которых она не сожмётся, какое бы значение ширины или высоты ни задавалось.
Ширина таблицы задаётся с помощью CSS-свойства width, а высота с помощью свойства height, например:

table {
  width: 100px;
  height: 100px;
}

Размеры таблицы можно задавать как в абсолютных единицах, например, в пикселях — 20px, так и в относительных, в процентах — 20%.
При использовании процентов размеры таблицы будут вычисляться с учётом размеров родительского элемента, в нашем случае окна мини-браузера.
Особое значение auto включает расчёт размеров по умолчанию. 

Например: 
width: auto; 
height: auto;

!!!Важное замечание. 
Проценты при задании высоты обычно не работают.


Размеры ячеек и столбцов тоже можно задавать вручную, особенно если вам не нравится, как браузер распределил ширину колонок. 
Размеры ячеек задаются точно так же, как и размеры таблицы: с помощью CSS-свойств width и height.

Есть два варианта добавления стилей ячейкам:
Назначать ячейкам уникальные имена классов, например, class="cell-11", и применять стили для этих классов.
Использовать атрибут style, внутри которого можно писать CSS-код.

Пример второго варианта:
<td style="width: 100px;">
  ...
</td>

По умолчанию ширина и высота таблицы зависит от содержимого и отступов внутри ячеек.

Чем меньше содержимого, тем меньше размеры таблицы.

С помощью CSS можно управлять размерами таблицы, задавать желаемую ширину и высоту.

Также размерами можно управлять с помощью атрибутов таблицы, но мы рассмотрим только CSS.

Стоит отметить, что у таблицы есть минимальные размеры, которые зависят от содержания, меньше которых она не сожмётся, какое бы значение ширины или высоты ни задавалось.

Ширина таблицы задаётся с помощью CSS-свойства width, а высота с помощью свойства height, например:

table {

width: 100px;

height: 100px;

}

Размеры таблицы можно задавать как в абсолютных единицах, например, в пикселях — 20px, так и в относительных, в процентах — 20%.

При использовании процентов размеры таблицы будут вычисляться с учётом размеров родительского элемента, в нашем случае окна мини-браузера.

Особое значение auto включает расчёт размеров по умолчанию.

Например:

width: auto;

height: auto;

!!!Важное замечание.

Проценты при задании высоты обычно не работают.

Размеры ячеек и столбцов тоже можно задавать вручную, особенно если вам не нравится, как браузер распределил ширину колонок.

Размеры ячеек задаются точно так же, как и размеры таблицы: с помощью CSS-свойств width и height.

Есть два варианта добавления стилей ячейкам:

Назначать ячейкам уникальные имена классов, например, class="cell-11", и применять стили для этих классов.

Использовать атрибут style, внутри которого можно писать CSS-код.

Пример второго варианта:

...

</td>