HTML таблица, примеры таблицы, ширина ячейки

или свойства HTML таблицы и ячеек на примерах

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

Навигация по странице

HTML ширина ячейки таблицы и ее высота, размер
Вертикальное HTML выравнивание в таблице
Горизонтальное HTML выравнивание в таблице
HTML заголовок таблицы, заголовок в ячейке
HTML таблица по центру, с левой, с правой стороны
HTML таблица внутри ячейки другой таблицы

HTML ширина ячейки таблицы и ее высота (размер ячеек)

HTML высота ячеек и их ширина, размер определяется следующими атрибутами:

<html>

          <head>

          <title>Пример таблицы: HTML высота ячейки и ее ширина, размеры ячеек</title>

          </head>

          <body>

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

          <tr>

          <td width="200" height="100">ячейка 1, первый ряд</td>

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

          </tr>

          <tr>

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

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

          </tr>

          </table>

          </body>

          </html>

Результат:

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

Были установлены размеры первой ячейки из первого ряда. В итоге вторая ячейка, этого же ряда унаследовала высоту первой, а первая ячейка, второгo ряда — ее ширину (ширину первой ячейки, первого ряда). Такова особенность взаимодействия элементов HTML таблицы.

Горизонтальное HTML выравнивание в таблице и в ячейке, текст

HTML выравнивание внутри таблицы. Текст слева, справа, по центру ячеек таблицы:

<html>

          <head>

          <title>Пример: текст в таблице, HTML выравнивание в ячейке</title>

          </head>

          <body>

          <table border="1" cellspacing="0" cellpadding="17" width="450">

          <tr height="100">

          <td align="left">ячейка 1</td>

          <td align="right">ячейка 2</td>

          <td align="center">ячейка 3</td>

          </tr>

          </table>

          </body>

          </html>

Результат:

ячейка 1

ячейка 2

ячейка 3

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

HTML выравнивание в таблице. Текст вверху, внизу, по центру ячеек таблицы:

<html>

          <head>

          <title>Пример: текст в таблице, HTML выравнивание в ячейке</title>

          </head>

          <body>

          <table border="1" cellspacing="0" cellpadding="17" width="450">

          <tr height="100">

          <td valign="top">ячейка 1</td>

          <td valign="bottom">ячейка 2</td>

          <td valign="middle">ячейка 3</td>

          </tr>

          </table>

          </body>

          </html>

Результат:

ячейка 1

ячейка 2

ячейка 3

Атрибут valign определяет вертикальное выравнивание текста внутри таблицы.

Теги, определяющие заголовок HTML таблицы

HTML заголовки таблицы:

<html>

          <head>

          <title>Примеры заголовков</title>

          </head>

          <body>

          <table border="1" cellspacing="0" cellpadding="10">

          <tr>

          <th>Заголовок</th>

          <th>Заголовок</th>

          <th>Заголовок</th>

          </tr>

          <tr>

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

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

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

          </tr>

          <tr>

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

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

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

          </tr>

          </table>

          </body>

          </html>

Результат:

Заголовок	Заголовок	Заголовок
Текст	Текст	Текст
Текст	Текст	Текст

Теги <th> </th> определяют заголовок HTML таблицы.

HTML таблица по центру, с левой, с правой стороны

Горизонтальное расположение HTML таблицы внутри web-страницы:

<html>

          <head>

          <title>Примеры HTML таблиц</title>

          </head>

          <body>

          <table align="center" width="220" bgcolor="#006699">

          <tr height="220">

          <td>

          <p>align="center"</p>

          </td>

          </tr>

          </table>

             <table align="left" width="220" height="220" bgcolor="#cc0000">

             <tr>

             <td>

             <p>align="left"</p>

             </td>

             </tr>

             </table>

          <table align="right" width="220" height="220" bgcolor="#66cc66">

          <tr>

          <td>

          <p>align="right"</p>

          </td>

          </tr>

          </table>

          </body>

          </html>

Результат: HTML таблица по центру страницы, слева, справа

В примере выше показаны три отдельные таблицы, каждая из которых состоит из одной ячейки. bgcolor – HTML атрибут – определяет цвет фона. В предыдущем уроке мы использовали его CSS аналог – background-color.

HTML таблица расположена внутри ячейки

Пример:

<html>

          <head>

          <title>Примеры HTML таблицы</title>

          </head>

          <body>

          <table border="1" cellspacing="0" bgcolor="#cccccc">

          <tr>

          <td width="150" height="100"> &nbsp; </td>

          <td width="150" align="center">

              <table border="1" cellspacing="5" style="background-color:#ffffff; width:80px; height:60px">

              <tr>

              <td> &nbsp; </td>

              <td> &nbsp; </td>

              </tr>

              <tr>

              <td> &nbsp; </td>

              <td> &nbsp; </td>

              </tr>

              </table>

          </td>

          </tr>

          </table>

          </body>

          </html>

Результат: HTML таблица внутри ячейки другой таблицы

Внутри второй ячейки находится еще одна таблица со своими атрибутами, значениями и стилями.

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

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

HTML таблица Примеры HTML таблицы и текст Код HTML таблицы