Таблицы в HTML

Таблицы в HTML

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

Создание таблиц HTML

Таблицы в HTML создаются при помощи тега <table>.

Таблица делится на строки тегом <tr>, который обозначает строку таблицы, а каждая строка делится на ячейки данных с тегом <td>, который обозначает данные таблицы.

Тег <td> может содержать текст, ссылки, изображения, списки, формы, другие таблицы и т.д.

Пример HTML таблицы:

<table border="1">
  <thead>
    <tr>
      <th>Номер</th>
      <th>Имя</th>
      <th>Эл. почта</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Вася Пупкин</td>
      <td>vasyapupkin@mail.com</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Валя Пупкина</td>
      <td>valyapupkina@mail.com</td>
    </tr>
  </tbody>
</table>

Встроенные в браузеры таблицы стилей будут отображать текст в элементе <th> жирным шрифтом и по центру. Но вы можете переопределить таблицу стилей браузера по умолчанию с помощью CSS.

Атрибуты cellpadding и cellspacing таблиц

Атрибуты cellpadding и cellspacing используются для настройки пустого пространства внутри таблицы.

  • cellpadding регулирует отступ между границей ячейки таблицы и ее содержимым.
  • cellspacing регулирует отступ между ячейками таблицы.
<table border="1" cellpadding="10" cellspacing="8">
  <thead>
    <tr>
      <th>Номер</th>
      <th>Имя</th>
      <th>Эл. почта</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Вася Пупкин</td>
      <td>vasyapupkin@mail.com</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Валя Пупкина</td>
      <td>valyapupkina@mail.com</td>
    </tr>
  </tbody>
</table>

Объединение строк и ячеек таблицы

Объединение позволяет расширять столбцы и строки на несколько столбцов и строк.

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

<table border="1" cellpadding="10" cellspacing="8">
  <thead>
    <tr>
      <th colspan="3">Информация</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="2">Клиенты</td>
      <td>Вася Пупкин</td>
      <td>vasyapupkin@mail.com</td>
    </tr>
    <tr>
      <td>Валя Пупкина</td>
      <td>valyapupkina@mail.com</td>
    </tr>
  </tbody>
</table>

В этом примере colspan объединяет 3 столбца в один и создает место для общего заголовка в верхней части таблицы. В свою очередь rowspan создает общую ячейку для двух строк, что позволяет отобразить ее в виде общей колонки для двух строк. Просто сохраните пример как html файл и посмотрите на результат.

Оставьте первый комментарий

Оставить комментарий

Ваш электронный адрес не будет опубликован.


*