Создание таблиц в HTML ⇒ код таблицы, ширина и высота

или как сделать таблицу в HTML собственными силами

Этот урок научит вас создавать HTML таблицы и манипулировать их свойствами.

Когда-то HTML таблицы использовались для верстки сайтов, но сегодня идеологами современных версий языков гипертекстовой разметки: XHTML и HTML 5, рекомендовано применять таблицы по назначению, то есть для представления данных.

Содержание страницы

Создание таблиц в HTML | Ширина полей внутри ячеек таблицы
Создание таблиц в HTML | Ширина полей между ячеек таблицы
Создание таблиц в HTML | Высота и ширина таблицы

HTML код таблицы, пример:

<html>

          <head>

          <title>HTML код таблицы, примеры</title>

          </head>

          <body>

          <table border="1">

          <tr>

          <td>ячейка 1, первый ряд</td>

          <td>ячейка 2, первый ряд</td>

          </tr>

          <tr>

          <td>ячейка 1, второй ряд</td>

          <td>ячейка 2, второй ряд</td>

          </tr>

          </table>

          </body>

          </html>

Результат:

Посмотреть в новом окне: HTML таблица

Теги, атрибуты и значения

Теги <table> </table> – объявляют о создании HTML таблицы.
border="1" – устанавливает границу HTML таблицы и ее ячеек в 1 пиксел. Если атрибут border отсутствует или его значение равно 0 – границ не будет.
Теги <tr> </tr> – определяют табличный ряд.
Теги <td> </td> – определяют ячейку HTML таблицы.

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

Как сделать таблицу в HTML | Cellpadding

Определим cellpadding или пространство внутри ячеек таблиц:

<html>

          <head>

          <title>Создание таблиц в HTML, примеры</title>

          </head>

          <body>

          <table border="1" cellspacing="0"

          cellpadding="8" style="background-color:#cc0000; color:#ffffff">

          <tr>

          <td>ячейка 1, первый ряд</td>

          <td> &nbsp; </td>

          </tr>

          <tr>

          <td>ячейка 1, второй ряд</td>

          <td>ячейка 2, второй ряд</td>

          </tr>

          </table>

          </body>

          </html>

Атрибуты и значения

cellspacing="0" – определяет расстояние между ячейками таблиц, а также между границами ячеек и границей таблицы.
cellpadding="8" – пространство между границей ячейки и ее содержимым.
style="" – линейное включение CSS.
background-color: – определяет цвет фона.
color: – определяет цвет текста.

Символ пробела   в этом месте заполняет пустое пространство внутри ячейки.

Результат:

ячейка 1, первый ряд
ячейка 1, второй ряд	ячейка 2, второй ряд

Заметьте, что в данном случае высота и ширина таблицы определена ее содержимым и значением cellpadding. И еще, различными браузерами свойства некоторых атрибутов отображаются по разному, если в Internet Explorer четко видно, что рамка черная, то, например, в Firefox она будет переливаться. Как обойти эти расхождения, вы узнаете в уроке CSS таблица.

Как сделать таблицу в HTML | Cellspacing

Определим cellspacing или расстояние между ячейками и границей таблицы в 12 пикселей:

<html>

          <head>

          <title>HTML код таблицы, примеры</title>

          </head>

          <body>

          <table border="1" cellspacing="12" cellpadding="12">

          <tr>

          <td style="background-color:#cc0000; color:#ffffff">ячейка 1, первый ряд</td>

          <td> &nbsp; </td>

          </tr>

          <tr>

          <td>ячейка 1, второй ряд</td>

          <td style="background-color:#cc0000; color:#ffffff">ячейка 2, второй ряд</td>

          </tr>

          </table>

          </body>

          </html>

cellspacing="", как уже было сказано выше, определяет расстояние между границами ячеек таблицы, а также между границами ячеек и границeй таблицы.

Результат:

ячейка 1, первый ряд
ячейка 1, второй ряд	ячейка 2, второй ряд

В следующем примере border="0" отменит границы HTML таблицы и ячеек:

<html>

          <head>

          <title>Создание таблиц в HTML</title>

          </head>

          <body>

          <table border="0" cellspacing="12" cellpadding="12">

          <tr>

          <td style="background-color:#cc0000; color:#ffffff">ячейка 1, первый ряд</td>

          <td> &nbsp; </td>

          </tr>

          <tr>

          <td>ячейка 1, второй ряд</td>

          <td style="background-color:#cc0000; color:#ffffff">ячейка 2, второй ряд</td>

          </tr>

          </table>

          </body>

          </html>

Результат:

ячейка 1, первый ряд
ячейка 1, второй ряд	ячейка 2, второй ряд

HTML размер таблицы, ширина и высота

Высота и ширина HTML таблицы:

<html>

          <head>

          <title>Высота и ширина HTML таблицы, пример</title>

          </head>

          <body>

          <table border="1" cellspacing="0" cellpadding="15" width="90%" height="130">

          <tr>

          <td>ячейка 1, первый ряд</td>

          <td style="background-color:#ffffcc">ячейка 2, первый ряд</td>

          <td>ячейка 3, первый ряд</td>

          </tr>

          <tr>

          <td>ячейка 1, второй ряд</td>

          <td>ячейка 2, второй ряд</td>

          <td>ячейка 3, второй ряд</td>

          </tr>

          </table>

          </body>

          </html>

Результат:

ячейка 1, первый ряд	ячейка 2, первый ряд	ячейка 3, первый ряд
ячейка 1, второй ряд	ячейка 2, второй ряд	ячейка 3, второй ряд

Посмотреть в новом окне: Ширина HTML таблицы

Атрибуты и значения

width – в данном случае была определена ширина HTML таблицы в процентах.
height – определяет высоту таблицы.

Дата публикации: Октябрь 2009 | Обновление: Ноябрь 2018

HTML изображение-карта HTML код таблицы Еще HTML таблица