' Создание таблиц в HTML | Шнайдер блог

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

Универсальность таблиц, а также широкий выбор параметров позволяют решать множество задач. Например, несмотря на актуальность слоев, таблица с невидимой границей может стать своего рода “модульной сеткой” для размещения тех или иных элементов.

Для добавления таблицы на страницу существует тег <table>. Он представляет собой контейнер для элементов, которые отвечают за содержимое таблицы. Строки и ячейки задаются при помощи тегов <tr> и <td>. Вместо последнего допускается использование тега <th>. В этом случае текст в ячейке будет выровнен по центру. Пример ячейки:

<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>TABLE</title>
</head>
<body>
 <table border="1" width="100%" cellpadding="5">
  <tr>
   <th># 1</th>
   <th># 2</th>
  </tr>
  <tr>
   <td># 3</td>
   <td># 4</td>
 </tr>
</table>
</body>
</html>

В браузере таблица будет отображаться так:

Атрибуты тега <table>

Ключевые атрибуты тега <table>:

  • align — выравнивание таблицы. Существуют следующие значения: left, right и center.
  • bgcolor — цвет фона таблицы.
  • border — толщина границ вокруг таблицы и между ячейками.
  • cellpadding — задает расстояние между границей ячейки и содержимым.
  • cellspacing — расстояние между внешними границами ячеек.
  • cols — число столбцов в ячейке.
  • rules — атрибут, отвечающий за то, где будут отображены границы между ячейками.
  • width — ширина таблицы.

Атрибуты тега <td>

Ключевые атрибуты тега <td>:

  • align — выравнивание содержимого ячейки по горизонтали. Возможны следующие “позиции”: left, right и center.
  • bgcolor —  цвет фона ячейки.
  • colspan — количество ячеек, которые вы хотите объединить по горизонтали.
  • height — высота ячеек.
  • rowspan — количество ячеек, которые вы хотите объединить по вертикали.
  • valign — выравнивание содержимого ячейки по вертикали. Возможны следующие “позиции”: top, middle, bottom, baseline.
  • width — ширина ячейки.

Выравнивание таблиц

Атрибут align тега <table> отвечает не только за выравнивание таблицы, но и за обтекание текстом (по аналогии с тегом <img>). Рассмотрим пример выравнивания таблицы по правому краю:

<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>Выравнивание таблицы по правому краю</title>
</head>
<body>
 <table width="200" bgcolor="#E6E6FA" cellspacing="0" cellpadding="4" border="2" align="right">
  <tr><td>Содержимое таблицы</td></tr>
 </table>
 <p>Текст, который будет “обтекать” таблицу по правому краю..</p>
</body>
</html>

Так таблица и текст будут выглядеть в браузере:

Объединение ячеек

Для того, чтобы объединить несколько ячеек в одну используйте атрибуты colspan (объединение ячеек по горизонтали) и rowspan (объединение ячеек по вертикали) тега <td>. Прежде чем добавлять атрибуты, проверьте количество ячеек в строках. В противном случае могут возникнуть проблемы. К пример, <td colspan="4"> объединит четыре ячейки, поэтому в следующей строки должно быть четыре тега <td>. Что произойдет, если количество ячеек в каждой строке будет разным? В этом случае в браузере будут отображаться “фантомные” ячейки. Например:

<html>

<head>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

  <title>Неправильное использование colspan</title>

</head>

<body>

  <table border="1" cellpadding="5" width="100%">

   <tr>

    <td colspan="2"># 1</td>

    <td># 2</td>

   </tr>

   <tr>

    <td># 3</td>

    <td># 4</td>

   </tr>

  </table>

</body>

Результат в браузере:

Рассмотрим на примере, как правильно объединять ячейки:

<html>

<head>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

  <title>Правильное объединение ячеек</title>

<table border="1" cellpadding="1" cellspacing="1" style="width:500px">

    <tbody>

        <tr>

            <td colspan="3">Статистика браузеров в 2015 году</td>

        </tr>

        <tr>

            <td>Crome</td>

            <td>Opera</td>

            <td>FireFox</td>

        </tr>

        <tr>

            <td>40.6%</td>

            <td>9.7%</td>

            <td>6.1%</td>

        </tr>

    </tbody>

</table>

Результат в браузере:


Категории


Хостинг сайтов

Популярное в категории