Как сделать таблицу по центру в html
Обновлено: 04.07.2024
Таблица - один из основных инструментов для создания web-страниц.
Без использования CSS, только с помощью таблиц можно создавать страницы со сложным дизайном. Если вы прошли серию уроков Делаем сайт - первые шаги, то вы понимаете о чем речь.
Любая таблица представляет собой набор строк и столбцов, на пересечении которых находятся ячейки. Например:
| столбец 1 | столбец 2 | столбец 3 |
|---|---|---|
| первый столбец первой строки | второй столбец первой строки | третий столбец первой строки |
| первый столбец второй строки | второй столбец второй строки | третий столбец второй строки |
| первый столбец третьей строки | второй столбец третьей строки | третий столбец третьей строки |
Рассмотрим нашу таблицу с точки зрения HTML:
-
сама таблица задается с помощью тегов ,
Создадим таблицу, где в качестве содержимого укажем пересечение номеров строк и столбцов:
Очень часто для выполнения замысла представления информации на странице и в таблице, нужно выравнивать саму таблицу или её содержимое по центру страницы или по правому/левому краям. Вообще, по умолчанию, выравнивание настроено по левому краю и если нужно изменить положение содержимого страницы, это нужно задавать явно, с помощью специальных атрибутов тегов.
Чтобы выровнять саму таблицу по центру веб-страницы или внутри блока, в котором она находится, используется атрибут тега table - align="значение" со значением center. Соответственно, если нужно выровнять таблицу по правому краю, то используется значение right, а если по левому - left. Всё просто, посмотрим на примере:
Результат (как видно, таблица находится в центре блока, в котором находится урок):
| Строка 1 Ячейка 1 | Строка 1 Ячейка 2 |
| Строка 2 Ячейка 1 | Строка 2 Ячейка 2 |
Теперь посмотрим, как выровнять содержимое ячеек таблицы по горизонтали и вертикали. Для того, чтобы выпровнять содержимое строк по горизонтали, используется тот же атрибут align с нужным значением для тега tr, а для ячеек он применяется для тега td, как здесь:
Результат (обратите внимание, что в верхней строке текст выровнен по правому краю, а в нижней правой ячейке - по центру:
| Строка 1 Ячейка 1 | Строка 1 Ячейка 2 |
| Строка 2 Ячейка 1 | Строка 2 Ячейка 2 |
Чтобы выровнять текст по вертикали, используется атрибут тегов tr и td - valign="значение" со значениями top (по верхнему краю строки), middle (по середине), bottom (по нижнему краю) или baseline (по базовой линии). По умолчанию установлено значение этого атрибута middle. Посмотрим на примере:
Для выравнивания элементов таблиц по горизонтали и вертикали в элементах TABLE, TR, TH и TD используют атрибуты align и valign.
Атрибут align применяется ко всем элементам таблицы и определяет общее горизонтальное выравнивание:
• – таблицы на странице по левому краю/правому краю/по центру;
• – элементов строки по левому краю/правому краю/по центру;
• – заголовка таблицы по левому краю/правому краю/по центру (по умолчанию по центру);
• – данных в ячейке по левому краю/ правому краю/по центру/по заданному символу (по умолчанию по левому краю).
Атрибут valign также применяется ко всем элементам таблицы и определяет общее вертикальное выравнивание:
• – элементов таблицы внизу/по центру/вверху (по умолчанию по центру);
• – элементов строки внизу/по центру/ вверху;
• – заголовка таблицы внизу/по центру/ вверху;
• – данных в ячейке внизу/по центру/ вверху.
В листинге 3.6 приведен пример использования в различных комбинациях описанных выше атрибутов форматирования таблицы и содержимого ячеек (рис. 3.11).
Листинг 3.6. Пример использования выравнивания таблицы и содержимого ячеек
Мы привыкли, что таблица состоит из строк и столбцов и, вставляя таблицу в Word, мы указываем 3 столбца на 2 строки. Вставляя таблицу на HTML-страницу, сначала мы должны показать что сейчас будет таблица. Для этого воспользуемся тэгом . Далее указываем, что сейчас будет строка, используя тэг . А в этой строке будет три ячейки, и мы пишем три раза … .
Получим:
Строка закончилась и мы должны ее закрыть .
Теперь начинается новая строка, открываем . Опять три ячейки - … записываем трижды. Строка закончилась . Таблица закончилась .
Получаем:
Но при записи этого кода мы не увидим каких-либо изменений. Нет границ, нет содержимого ячеек.
Пример
Результат
Как задать границу таблицы
Добавим границу. Для этого в нужно внести атрибут BORDERCOLOR и указать значение цвета.
Зададим цвет для границы зеленый.
Смотрим результат:
Замечание. Если при этом не будет указан размер границы отличный от нуля, то границы все равно видно не будет.
Как задать ширину таблицы
Ширина каждого столбца задается по ее содержимому. Для того чтобы изменить размер таблицы, нужно задать значение ее ширины. Увеличим размер таблицы и зададим его значение в 400 точек.
Замечание. Размер таблицы можно указывать в точках
или в процентах (в процентах от размера окна браузера)
Причем, в-первом случае размер таблицы не будет меняться, а во-втором, размер таблицы будет зависеть от размера окна браузера.
Просмотрим результат в браузере:
Как выровнять таблицу
Не всегда таблица должна располагаться по левому краю. Давайте расположим наш справочник по центру, для этого перед таблицей установим тэг , а после таблицы его закроем:
Как закрасить таблицу
Давайте закрасим нашу таблицу желтым цветом. Для этого в тэге пропишем BGCOLOR и укажем цвет.
Наша страница будет иметь код:
А в браузере
Как закрасить строку
Теперь закрасим верхнюю строку (шапку) в зеленый. Мы хотим закрасить строку, поэтому и атрибут BGCOLOR должны указать в тэге TR.
Результат
Как закрасить ячейку
Дополним нашу таблицу данными еще нескольких человек
Результат
Теперь давайте закрасим столбец с нумерацией. Так как в HTML нет понятия столбец, то на первый взгляд это выглядит затруднительно. Но на самом деле все довольно просто: в каждой строке нужно закрасить первую ячейку. То есть в тэге прописать атрибут BGCOLOR и указать цвет
В браузере вы увидите такую таблицу:
Как задать высоту таблицы (строки)
HTML дает возможность задать как высоту всей таблицы, так и отдельных строк.
Для задания высоты таблицы атрибут HEIGHT нужно указать в тэге TABLE, а чтобы изменить высоту отдельной строки – указать этот атрибут в тэге TR.
Для примера увеличим высоту первой строки
Результат
Как изменить ширину столбца
Теперь увеличим ширину первого столбца. Так как в HTML нет понятия столбец, то нам придется указать ширину первой ячейки верхней строки.
Результат
Выравнивание содержимого таблицы (по горизонтали и вертикали)
Выравнивать содержимое таблицы, строки или ячейки можно как по горизонтали (по верхнему краю, по середине, по нижнему краю), так и по вертикали (по левому краю, по средине, по правому краю).
И если с выравниванием по вертикали все понятно (у тэгов TABLE, TR и TD есть атрибут ALIGN). То как выровнять по горизонтали не совсем понятно.
Для выравнивания содержимого таблицы, строки или ячейки по горизонтали существует атрибут VALIGN. И этот атрибут имеет свои параметры TOP (выравнивание по верхнему краю), MIDDLE (по середине), BOTTOM (по нижнему краю).
Для нашей шапки установим выравнивание по центру, по середине.
Также выровняем содержание ячеек с нумерацией и телефонами по центру.
Читайте также: