Как сделать таблицу по центру в html – Создаем красивые таблицы в HTML — отступы, фон, заголовок, выравнивание текста

Таблица по центру, html

Таблица посередине страницы — этим сегодня займися! Зачем нужно ставить таблицу посередине!? Как правило большинство сайтов располагаются посередине страницы html. Поэтому нужно это уметь делать! И в любом случае может пригодиться!

Мы уже написали несколько страниц о таблицах

На самом деле поставить таблицу по центру очень просто! Только требуется ввести соответствующее свойство!

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

1. Таблица посередине align=»center»
2. Поставить таблицу посередине с помощью css
3. Текст в таблице по центру html
4. html картинка в таблице по центру

Таблица посередине align=»center»

А именно, нужно поставить такую строчку:

align=»center»

А должна получиться такая строчка:

<table  width=»200″ border=»1″ align=»center»>

Смотрим пример:

Пример таблицы по центру с атрибутом align=»center»

Не забываем, что бордюр border=»1″ можно убрать!

Он поставлен только для того, чтобы вы могли увидеть таблицу посередине, а иначе никак!




Поставить таблицу посередине с помощью css

Добавим в класс — margin: auto;…

Стили:

.table_center_by_css {

width: 300px;

border: 1px solid #000;

margin: auto;

}

Таблица:

<table>

  <tr>

    <td>Пример таблицы по центру с помощью css</td>

  </tr>

Результат:

Пример таблицы по центру с помощью css

Ещё:

Что ищут пользователи со словами таблица посередине, кроме выше рассказанных случаев !?




Текст в таблице по центру html

Для иллюстрации данного запроса — текст в таблице по центру html — нам потребуется таблица -возьмем верхнюю таблицу растянем её на весь блок, поставим ширину 100%

Стиль:

.table_with_text_on_center {

text-align: center;

width: 100%;

border: 1px solid #030303;

}

Таблица:

  <tr>

    <td>Текст посередине таблицы</td>

  </tr>

</table>

 

Результат:

Текст посередине таблицы




Html картинка в таблице по центру

Ничего не меняем в верхней таблице, кроме надписи в самой таблице и вставим код картинки вовнутрь:

Картинка:

<img src=»https://dwweb.ru/__img/css/figure/bear.jpg»>

Результат:

Теги:
таблица по центру html выравнивание таблицы по центру html как выровнять таблицу по центру html текст в таблице по центру html как сделать таблицу по центру html html таблица по центру страницы html таблица по центру ячейки как расположить таблицу по центру html как разместить таблицу по центру в html html картинка в таблице по центру как поставить таблицу по центру в html html table centerрасположение таблицы по центру html как поместить таблицу в центр htmlhtml страница таблица посередине страницы

CSS: Оформление HTML таблиц — рамка, размер, выравнивание текста

Табличные данные — информация, которую можно отобразить в виде таблицы и логически разделить по столбцам и строкам. Для отображения табличных данных на веб-страницах используется HTML тег <table>, представляющий из себя контейнер с содержимым таблицы. Контент HTML таблицы описывается построчно, каждая строка начинается с открывающего тега <tr> и заканчивается закрывающим тегом </tr>.

Внутри тега <tr> располагаются ячейки таблицы, представленные тегами <th> или <td>. Именно ячейки содержат весь контент таблицы, отображаемый на веб-странице.

Рамка таблицы

По умолчанию HTML таблица на веб-странице отображается без рамки, для добавления рамки к таблице, как и ко всем другим элементам, используется CSS свойство border. Но стоит обратить внимание на то, что если добавить рамку только к элементу

<table>, то она отобразиться вокруг всей таблицы. Для того, чтобы ячейки таблицы тоже имели рамку, надо будет установить свойство border и для элементов <th> и <td>.

table, th, td { border: 1px solid black; }

Попробовать »

Теперь и таблица и ячейки имеют рамки, при этом и каждая ячейка и таблица имеют свои собственные рамки. В результате между рамками появилось пустое пространство, управлять размером этого пространства позволяет свойство border-spacing, которое задается для всей таблицы целиком. Другими словами, нельзя управлять промежутками между различными ячейками индивидуально.

Даже если убрать промежутки между ячейками с помощью значения

0 свойства border-spacing, то рамки ячеек будут соприкасаться друг с другом, удваиваясь. Для объединения рамок ячеек используется свойство border-collapse. Оно может принимать два значения:

• separate: является значением по умолчанию. Ячейки отображаются на небольшом расстоянии друг от друга, каждая ячейка имеет свою собственную рамку.
• collapse: соединяет соседние рамки в одну, все промежутки между ячейками, а также между ячейками и рамкой таблицы игнорируются.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      table, td, th { 
	    border: 4px outset blue;
		border-spacing: 5px;
	  }
      .first { border-collapse: collapse; }
    </style>
  </head>

  <body>
    <table>
      <tr><th>Имя</th><th>Фамилия</th></tr>
      <tr><td>Гомер</td><td>Симпсон</td></tr>
      <tr><td>Мардж</td><td>Симпсон</td></tr>
    </table>
    <br>
    <table>
      <tr><th>Имя</th><th>Фамилия</th></tr>
      <tr><td>Гомер</td><td>Симпсон</td></tr>
      <tr><td>Мардж</td><td>Симпсон</td></tr>
    </table>
  </body>
</html>

Попробовать »

Размер таблицы

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

th, td { padding: 7px; }

Попробовать »

Размер таблицы зависит от ее содержимого, но часто возникают ситуации, когда таблица оказывается слишком узкой и появляется необходимость ее растянуть. Ширину и высоту таблицы можно изменять с помощью свойств width и height, задавая нужные размеры или самой таблице или ячейкам:

table { width: 70%; }
th { height: 50px; }

Попробовать »

Выравнивание текста

По умолчанию текст в заголовочных ячейках таблицы выравнивается по центру, а в обычных ячейках текст выровнен по левому краю, используя свойство text-align можно управлять выравниванием текста по горизонтали.

CSS свойство vertical-align позволяет управлять выравниванием текстового содержимого по вертикали. По умолчанию текст выровнен вертикально по центру ячеек. Вертикальное выравнивание можно переопределить с помощью одного из значений свойства vertical-align:

• top: текст выравнивается по верхней границе ячейки
• middle: выравнивает текст по центру (значение по умолчанию)
• bottom: текст выравнивается по нижней границе ячейки

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      table, td, th {
        border: 1px solid black; 
        border-collapse: collapse;
      }
      table { width: 70% }
      td { text-align: right; }
      th { height: 50px; }
      .test1 { vertical-align: top; }
      .test2 { vertical-align: bottom; }
    </style>
  </head>

  <body>
    <table>
      <tr><th>Имя</th><th>Фамилия</th></tr>
      <tr><td>Гомер</td><td>Симпсон</td></tr>
      <tr><td>Мардж</td><td>Симпсон</td></tr>
    </table>
  </body>
</html>

Попробовать »

Чередование фонового цвета строк таблицы

При просмотре больших таблиц, содержащих много строк с большим количеством информации, бывает трудно отследить, какие данные относятся к конкретной строке. Чтобы помочь пользователям сориентироваться, можно использовать два разных фоновых цвета поочередно. Для создания описанного эффекта можно использовать селектор class, добавляя его к каждой второй строке таблицы:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      table {
        width: 70%;
        border-collapse: collapse;
      }
      td, th {
        border: 1px solid #98bf21;
        padding: 3px 7px 2px 7px;
      }
      th {
        text-align: left;
        padding: 5px;
        background-color: #A7C942;
        color: #fff;
      }
      .alt td { background-color: #EAF2D3; }
    </style>
  </head>
  <body>
    <table>
      <tr><th>Имя</th><th>Фамилия</th><th>Положение</th></tr>
      <tr><td>Гомер</td><td>Симпсон</td><td>отец</td></tr>
      <tr><td>Мардж</td><td>Симпсон</td><td>мать</td></tr>
      <tr><td>Барт</td><td>Симпсон</td><td>сын</td></tr>
      <tr><td>Лиза</td><td>Симпсон</td><td>дочь</td></tr>
    </table>
  </body>
</html>

Попробовать »

Добавлять атрибут class к каждой второй строке довольно утомительное занятие. В CSS3 был добавлен псевдо-класс :nth-child, позволяющий решить эту проблему альтернативным путем. Теперь эффекта чередования можно достичь исключительно средствами CSS, не прибегая к изменению HTML-разметки документа. С помощью псевдо-класса

:nth-child можно выбрать все четные или нечетные строки таблицы, используя одно из ключевых слов: even (четные) или odd (нечетные):

tr:nth-child(odd) { background-color: #EAF2D3; }

Попробовать »

Изменение фона строки при наведении курсора

Еще одним способом повышения удобочитаемости табличных данных является изменение фонового цвета строки при наведении на нее курсора мыши. Это поможет выделить нужное содержимое таблицы и повысит визуальное восприятие данных.

Реализовать такой эффект очень просто, для этого нужно добавить псевдо-класс :hover к селектору строки таблицы и задать нужный цвет фона:

tr:hover { background-color: #E0E0FF; }

Попробовать »

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

Выравнивание HTML таблицы по центру возможно только в том случае, если ширина таблицы меньше, чем ширина её родительского элемента. Чтобы выровнять таблицу по центру, надо воспользоваться свойством margin, задав ему минимум два значения: первое значение будет отвечать за внешний отступ таблицы сверху и снизу, а второе — за автоматическое выравнивание по центру:

table { margin: 10px auto; }

Попробовать »

Если вам нужны разные отступы сверху и снизу таблицы, то можно задать свойству margin три значения: первое будет отвечать за отступ сверху, второе за выравнивание по горизонтали, а третье за отступ снизу:

table { margin: 10px auto 30px; }

Создаем красивые таблицы в HTML — отступы, фон, заголовок, выравнивание текста

Тема сегодняшней статьи — создание таблиц, их изменение. Научу делать фон, покажу как сделать таблицу с нуля, объединить ей ячейки, выровнять текст и сделать заголовок. Будет интересно!

Применение таблиц в HTML (см. также что такое html?) достаточно широкое. Можно применять их не только как логичную и понятную для человеческого глаза структуру данных в ячейках, строках и столбцах. При помощи таблиц можно еще очень удобно поместить информацию на странице.

Часто наши сайты и представляют собой что-то наподобие таблиц, только не в табличной верстке, а сверстанных при помощи дивов (блоков). Даже самая простая верстка сайта контейнерами напоминает таблицу, в левом (правом) меню которой находится боковая панель, в «шапке таблицы» — заголовок, меню, логотип, по центру — контент.

Что-то вроде этого и наблюдается при применении табличной верстки. Перейдем к практике.

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

Любая таблица содержит в себе строки и столбы. Они, в свою очередь, могут содержать текст и изображение.

Для добавления на страницу таблицы используется тег <table>. Это основной и главный контейнер, в который помещают элементы таблицы (строки и столбцы). И этот контейнер нужно закрывать — </table>.

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

Строки таблицы (<tr></tr>) должны быть помещены строго между <table></table>. А столбцы таблицы (<td></td>) в свою очередь помещаются строго между тегами <tr></tr>.

Давайте создадим на практике таблицу, которая будет состоять из одной строки и четырех столбцов. Нам нужно обозначить начало таблицы (<table>), начало строки (<tr>), четыре ячейки (<td>), конец строки (</tr>), конец таблицы (</table>).

<table border=»1″>
  <tr>
    <td>Яч. 1</td>
    <td>Яч. 2</td>
    <td>Яч. 3</td>
    <td>Яч. 4</td>
  </tr>
</table>

Результат:

Теперь давайте используем тег <th>, чтобы больше не возвращаться к этому.

<table border=»1″>
  <tr>
    <td>Яч. 1</td>
    <td>Яч. 2</td>
    <td>Яч. 3</td>
    <td>Яч. 4</td>
  </tr>
</table>

Результат:

Я поставил ширину таблицы 400 и, как видите, первая и третья ячейка выделены жирным и выравниваются по центру. Остальные — по левому краю. Я рекомендую всегда уделять достаточное количество времени форматированию кода, чтобы не запутаться в нем. В маленькой таблице это может не играть большой роли, но вот в большой…

Давайте немного подробнее о ширине, раз я ее упомянул. Ширина таблицы задается атрибутом width, высота — height. Изменять подобным образом можно не только ширину и высоту таблицы, но и размеры ячеек (они все должны помещаться в таблицу, иначе браузер не поймет, что вы от него хотите).

Эти значения (ширина и высота) задаются в пикселях, процента. Можно оставить и так, ничего не писать, браузер подумает, что вам лень было писать «px» и сочтет цифру за пиксели.

Ну а если вы хотите выровнять содержимое одной или нескольких табличных ячеек, — используйте атрибут align со значениями left, center, right. Это горизонтальное выравнивание, а есть еще вертикальное и у него свой отдельный атрибут — valign, который может принимать значения: baseline (вертикальное выравнивание точно по базовой линии), bottom (по нижнему краю), middle (значения ячеек будут выравнены вертикально по середине), top (по верхнему краю). По умолчанию браузеры выравнивают ячейки по центру (середине).

Идем дальше.

Увеличиваем рамку (границы) таблицы и меняем ее цвет

Вы наверное заметили, я уже показал вам как можно работать с рамкой и шириной таблицы. Вообще, по дефолту таблицы всегда отображается в браузере без рамки, а это не всегда удобно. Вот почему:

Согласитесь, как-то не очень. Но это не проблема для тех, кто уже знаком с HTML-атрибутом border, который я и использовал в примерах в начале поста.

Добавляем всего 1 атрибут и становится уже получше:

Это как в Экселе! Представьте, что не было бы разделения ячеек линиями (сеткой)? Ну ужас же. А вот что будет, если выставить border, равный 10.

Как видите, border влияет только на внешнюю границу и обрамление таблицы, меняя ширину внешней рамки, а границы между ячейками таблицы оставляя прежними.

Давайте изменим цвет этой рамки, ведь для этого тоже есть атрибут — bordercolor. Установим его значение равным «d3d3d3». Результат:

Как сделать отступы в таблице

Отступы в таблице также нужны для повышения «читаемости», как и границы ячеек. Для создания отступов нам понадобится атрибут «cellspacing». Я буду по прежнему работать с нашей 4х4 таблицей, применяя к ней этот атрибут. Актуализирую код для вас (я привожу только одну строку, чтобы не загромождать пост):

<table border=»10″ bordercolor=»#d3d3d3″ cellspacing=»10″>
  <tr>
    <td>Яч. 1</td>
    <td>Яч. 2</td>
    <td>Яч. 3</td>
    <td>Яч. 4</td>
  </tr>
</table>

Результат:

Это были отступы снаружи ячеек. Но есть похожий атрибут для задания отступов внутри ячеек — cellpadding, сейчас я сделаю его также равным 10 и вы увидите, как увеличилось расстояние от содержимого ячейки до ее границ (пришлось сделать количество ячеек поменьше, чтобы таблица не разрасталась чрезмерно). Код:

<table border=»10″ bordercolor=»#d3d3d3″ cellspacing=»10″ cellpadding=»10″>
  <tr>
    <td>Яч. 1</td>
    <td>Яч. 2</td>
    <td>Яч. 3</td>
    <td>Яч. 4</td>
  </tr>
</table>

Результат:

Теперь уберем «cellspacing» и оставим только «cellpadding». Результат:

Вот и разобрались с тем как создать отступы в таблице и управлять ими. Отлично! Если Вас интересуют как делать перенос строки, то об этом написано здесь.

Как грамотно объединить ячейки в таблице

Для объединения ячеек в вашей таблице также есть специальные атрибуты. Это «colspan» и «rowspan». Первый (colspan) объединяет ячейки по столбцам (горизонтали), второй (rowspan) — по строкам или по вертикали. Давайте объединим что-нибудь в нашей таблице.

Здесь внимательно! При объединении ячеек, вам нужно уменьшить их количество на то число (минус один), которое вы прописываете в параметрах атрибута. Если вы будете создавать таблицу в HTML, объединять ячейки не удаляя лишние, то сайт будет ехать. Объединяем две — удаляем одну. Объединяем три — удаляем две. И так далее.

При слиянии ячеек в колонках или столбцах, одну ячейку нужно удалять! И делать это столько раз, сколько ячеек вы объединяете. Сейчас покажу на примере.

При слиянии ячеек в колонках или столбцах, одну ячейку нужно удалять! И делать это столько раз, сколько ячеек вы объединяете.

Сейчас покажу на примере. Вот наша текущая таблица:

Давайте объединим ячейки с номерами «1 и 2», «5 и 9», «4, 8, 12», «6 и 7». Смотрите как круто получилось, я сам не ожидал!

Принцип объединения такой.

При горизонтальном объединении ячейки номер 1 и 2, нужно в первой прописать «colspan=»2″», содержимое второй поместить в первую (мы же объединяем) и удалить вторую ячейку (или скрыть ее от HTML как это сделал я — потом покажу.)

При вертикальном объединении ячеек номер 4, 8, 12, нужно в первой ячейке (номер 4) прописать «rowspan=»2″», а содержимое остальных удалить, предварительно поместив в объединенную ячейку.

Вот какой получился у меня код. Я скрыл ячейки для наглядности (чтобы вам было более понятно), но можно и удалить их.

<table border=»10″ bordercolor=»#d3d3d3″ cellpadding=»10″>
  <tr>
    <td colspan=»2″>Яч. 1 и 2</td>
    <!—<td>Яч. 2</td>—>
    <td>Яч. 3</td>
    <td rowspan=»3″>Яч. 4, 8, 12</td>
  </tr>
  <tr>
    <td rowspan=»2″>Яч. 5 и 9</td>
    <td colspan=»2″>Яч. 6 и 7</td>
    <!—<td>Яч. 7</td>—>
    <!—<td>Яч. 8</td>—>
  </tr>
  <tr>
    <!—<td>Яч. 9</td>—>
    <td>Яч. 10</td>
    <td>Яч. 11</td>
    <!—<td>Яч. 12</td>—>
  </tr>
</table>

Надеюсь понятно объяснил и привел хороший пример.

Как сделать заголовок у таблицы

Чтобы задать таблице заголовок — используйте теги <caption></caption> после начала таблицы (<table>), но до начала тега <tr>. Вот что получается:

Ну и небольшой HTML-хак для тех, кому нужно разместить заголовок таблицы под самой таблицей. Используйте атрибут align со значением bottom вот так:

<caption align=»bottom»>Как задать заголовок</caption>

И тогда заголовок таблицы переместится под таблицу.

Итак, мы рассмотрели почти все, за исключением… Фона!

Как сделать красивый фон у ячейки или всей таблицы

HTML позволяет задать цвет не только у всего фона таблицы, но и у каждой отдельной ячейки (если есть такая потребность). Устанавливает цвет фона таблицы или ячейки атрибут «bgcolor».

Давайте я сначала задам фон для всей таблицы. Это будет цвет «»lightgreen»» (а вообще можно задать его и вот так — «»#90EE90″»). Вот так теперь у меня начинается таблица:

<table border=»10″ bordercolor=»#d3d3d3″ cellpadding=»10″ bgcolor=»lightgreen»>

Результат:

Ого, цвет фона ячеек стал очень даже «»lightgreen»». Теперь покрашу одну из ячеек таблицы обратно в белый, присвоив ей такой же атрибут, только с другим цветом:

<td rowspan=»3″ bgcolor=»white»>Ячейка 4, 8, 12</td>

Tada! Результат:

По-моему круто! Если бы я участвовал в конкурсе креативных таблиц (или обучения дошкольников HTML) — точно бы победил.

Еще хотел написать, как вставить картинку в качестве фона таблицы в HTML, но я уже упоминал об этом своей другой статье по ссылке выше.

Удачи и успехов в изучении HTML.

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

Поговорим о том, как выровнять текст в таблице HTML в горизонтальном и в вертикальном направлениях.

Для того, чтобы выровнять по горизонтали следует использовать CSS-свойство text-align. Ему присущи такие значения, как left, center и right.

Чтобы выровнять по вертикали необходимо применять CSS-свойство vertical-align. Ему, в свою очередь, характерны такие значения, как top, middle и bottom.

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

На практике выравнивание содержимого ячеек выглядит вот так:

td {
    ...
    vertical-align: bottom;
    text-align: right;
}

Результат в браузере для таблицы, которую мы создали в прошлом уроке:

Таким образом весь текст в ячейках прижался к правому нижнему углу.

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

Если Вас интересует как выровнять текст в ячейке таблицы и эта ячейка конкретная, нужно задать свойство только для этой ячейки. Например, с помощью атрибута class. В таблице присваиваете ячейке класс:

...
<td>
...

А затем задаёте свойства для этого класса:

.specialTd {
    ...
    vertical-align: bottom;
    text-align: right;
}

Как создать таблицу в HTML5 и указать её параметры через стили?

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
8.0+	1.0+	4.0+	1.0+	1.0+	1.0+	1.0+

Задача

Создать таблицу и указать её параметры (поля и расстояние между ячейками) через стили.

Решение

Таблица состоит из строк и столбцов ячеек, которые могут содержать текст и рисунки. Для добавления таблицы на веб-страницу используется тег <table>. Этот элемент служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются соответственно с помощью тегов <tr> и <td>. Таблица должна содержать хотя бы одну ячейку (пример 1). Допускается вместо тега <td> использовать тег <th>. Текст в ячейке, оформленной с помощью тега <th>, отображается браузером шрифтом жирного начертания и выравнивается по центру ячейки. В остальном, разницы между ячейками, созданными через теги <td> и <th> нет.

Пример 1. Создание таблицы

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег table</title>
 </head>
 <body>
  <table border="1">
   <tr>
    <th>Ячейка 1</th>
    <th>Ячейка 2</th>
   </tr>
   <tr>
    <td>Ячейка 3</td>
    <td>Ячейка 4</td>
  </tr>
 </table>
 </body>
</html>

Порядок расположения ячеек и их вид показан на рис. 1.

Рис. 1. Результат создания таблицы с четырьмя ячейками

Атрибут border тега <table> допустимо добавлять только с пустым значением (<table border>) или равным 1. Все остальные значения не проходят валидацию.

Для управления полями внутри ячеек используется стилевое свойство padding, которое добавляется к селектору td. Расстояние между ячейками меняется свойством border-spacing (пример 2) добавляемым к селектору table, браузер IE понимает его только с версии 8.0.

Пример 2. Поля внутри ячеек

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег table</title>
  <style>
   table {
    width: 100%; /* Ширина таблицы */
    background: white; /* Цвет фона таблицы */
    color: white; /* Цвет текста */
    border-spacing: 1px; /* Расстояние между ячейками */
   }
   td, th {
    background: maroon; /* Цвет фона ячеек */
    padding: 5px; /* Поля вокруг текста */
   }
  </style>
 </head> 
 <body>
  <table>
   <tr><th>Заголовок 1</th><th>Заголовок 2</th></tr>
   <tr><td>Ячейка 3</td><td>Ячейка 4</td></tr>
  </table>
 </body>
</html>

Таблица с полями и расстоянием между ячейками показана на рис. 2. Аналогичного результата можно добиться и с помощью рамки белого цвета вокруг ячеек.

Рис. 2. Поля в ячейках таблицы

Таблицы | htmlbook.ru

Благодаря универсальности таблиц, большому числу параметров, управляющих их видом, таблицы надолго стали определенным стандартом для верстки веб-страниц. Таблица с невидимой границей представляет собой словно модульную сетку, в блоках которой удобно размещать элементы веб-страницы. Тем не менее, это не совсем правильный подход, ведь каждый объект HTML определен для своих собственных целей и если он используется не по назначению, причем повсеместно, это значит, что альтернатив нет. Так оно и было долгое время, пока на смену таблицам при верстке сайтов не пришли слои. Это не значит, что слои теперь используются сплошь и рядом, но тенденция уже наметилась четко — таблицы применяются для размещения табличных данных, а слои — для верстки и оформления.

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

Таблица состоит из строк и столбцов ячеек, которые могут содержать текст и рисунки. Обычно таблицы используются для упорядочения и представления данных, однако возможности таблиц этим не ограничиваются. C помощью таблиц удобно верстать макеты страниц, расположив нужным образом фрагменты текста и изображений.

Для добавления таблицы на веб-страницу используется тег <table>. Этот элемент служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются соответственно с помощью тегов <tr> и <td>. Таблица должна содержать хотя бы одну ячейку (пример 12.1). Допускается вместо тега <td> использовать тег <th>. Текст в ячейке, оформленной с помощью тега <th>, отображается браузером шрифтом жирного начертания и выравнивается по центру ячейки. В остальном, разницы между ячейками, созданными через теги <td> и <th> нет.

Пример 12.1. Создание таблицы

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML  4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег TABLE</title>
 </head>
 <body>
  <table border="1" cellpadding="5">
   <tr>
    <th>Ячейка 1</th>
    <th>Ячейка 2</th>
   </tr>
   <tr>
    <td>Ячейка 3</td>
    <td>Ячейка 4</td>
  </tr>
 </table>
 </body>
</html>

Порядок расположения ячеек и их вид показан на рис. 12.1.

Рис. 12.1. Результат создания таблицы с четырьмя ячейками

Как сделать таблицу в HTML. Основы HTML для начинающих. Урок №14

Как сделать таблицу в HTML. Основы HTML для начинающих. Урок №14

 

Всем привет!
Продолжаем изучать основы HTML. В этом уроке я расскажу и на примерах покажу, как сделать таблицу в HTML. А также рассмотрим, как можно задать цвет ячейкам таблицы, как отцентрировать таблицу, научимся делать границу таблицы, и т.д.
Таблицы HTML часто используют в HTML для перечислений некоторых сведений. Раньше еще таблицы использовали для создания каркаса веб-страниц:

…но это уже в прошлом, так как на сегодняшний день есть более эффективные способы создания каркасов для сайта с помощью CSS. Я частенько использую таблицу на своем блоге или на сайте, вот например, как в этой статье.

Я думаю, вы разобрались, для чего нужно учиться создавать таблицу.

Из каких основных тегов состоит таблица?

○ тег TABLE 
Это  главный контейнер для создания таблицы, внутри которого содержатся другие элементы таблицы, такие как столбики и ряды.
Закрывающий тег обязательный.

<table></table>

○ тег TR

Внутри контейнера <table>……</table> размещаются ряды:

Ряды создаются с помощью тега <tr></tr>. Именно с помощью этого тега и определяется количество рядов.
Закрывающий тег обязателен.

○ тег TD

Внутри контейнеров <table><tr>……</tr></table> размещаются столбики (ячейки):

ячейка 1	ячейка 2
ячейка 1	ячейка 2
ячейка 1	ячейка 2

Столбики создаются с помощью тега <td></td>.
Закрывающий тег обязателен.

Внимание: без использования всех этих тегов таблицу создать не возможно.

Теперь попробуем воспользоваться теорией и создадим таблицу на практике.

Задание: создать таблицу из одного ряда, где будет три столбика.

ряд -1 /столбик 1

столбик 2

столбик 3

<table>
<tr>
<td>ряд -1 /столбик 1</td>
<td>столбик 2 </td>
<td>столбик 3</td>
</tr>
</table>

Задание: создать таблицу из трех рядов и трех столбиков.

ряд -1 /столбик 1	столбик 2	столбик 3
ряд -2 /столбик 1	столбик 2	столбик 3
ряд -3 /столбик 1	столбик 2	столбик 3

<table>
<tr>
<td>ряд -1 /столбик 1</td>
<td>столбик 2 </td>
<td>столбик 3</td>
</tr>
<tr>
<td>ряд -2 /столбик 1</td>
<td>столбик 2 </td>
<td>столбик 3</td>
</tr>
<tr>
<td>ряд -3 /столбик 1</td>
<td>столбик 2 </td>
<td>столбик 3</td>
</tr>
</table>

До этого момента вам все ясно ? Кто не понял, поднимите руку! Ага, поняли все, значит идем далее.

Теперь рассмотрим атрибуты для таблицы.

*Атрибуты

○ Границы таблицы в HTML

Чтобы была видна таблица, к тегу <table> применяется атрибут «border».

<table border="1">

Если значение атрибута «border» «0», границы видно не будет, если не прописать к тегу <table> атрибут «border», граница в таблице тоже видна не будет.

<html>
<head>
<title>Границы таблицы в HTML – StepkinBlog.ru</title>
</head>
<body>
<table border="1">
<tr>
<td>ряд -1 /столбик 1</td>
<td>столбик 2 </td>
<td>столбик 3</td>
</tr>
</table>
</body>
</html>

Результат:

ряд -1 /столбик 1

столбик 2

столбик 3

Попробуйте поменять значение в атрибуте «border» на «10» . 

○ Как объединить ячейки в таблице

Чтобы объединить ячейки в таблице используют атрибуты «colspan» и «rowspan» к тегу <td> .

• colspan — объединение ячеек по горизонтали;
• rowspan — объединение ячеек по вертикали.

<td colspan="2"> 

<td rowspan="2">

В значениях указываете, сколько нужно объединить ячеек.

<table border="1">
<tr>
<td colspan="2">ряд 1 столбик 1</td>
</tr>
<tr>
<td>ряд 2 столбик 1</td>
<td>ряд 2 столбик 2</td>
</tr>
</table>

Результат:

ряд 1 столбик 1
ряд 2 столбик 1	ряд 2 столбик 2

<table border="1">
<tr>
<td rowspan="2">ряд 1 столбик 1</td>
<td>ряд 1 столбик 2</td>
</tr>
<tr>
<td>ряд 2 столбик 1</td>
</tr>
</table>

Результат:

ряд 1 столбик 1	ряд 1 столбик 2
	ряд 2 столбик 1

Более сложный пример:

<html>
<head>
<title>Таблицы в HTML – StepkinBlog.ru</title>
</head>
<body>
<table border="1">
<tr>
<td>ряд -1 /столбик 1</td>
<td colspan="3">столбик 2 </td>
<td rowspan="2">столбик 3</td>
</tr>
<tr>
<td>ряд -2 /столбик 1</td>
<td >столбик 2 </td>
<td>столбик 3</td>
<td>столбик 4</td>
</tr>
</table>
</body>
</html>

 

Результат:

ряд -1 /столбик 1	столбик 2			столбик 3
ряд -2 /столбик 1	столбик 2	столбик 3	столбик 4

○ Как увеличить расстояние между ячейками таблицы

Чтобы увеличить расстояние между текстом и границей ячейки, прописывают атрибут «cellpadding» к тегу <table>

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

В значениях у атрибута «cellpadding» указываете расстояние отступа

<table border="1" cellpadding="20">
<tr>
<td>ряд 1 столбик 1</td>
<td>столбик 2</td>
</tr>
</table>

Результат:

ряд 1 столбик 1

столбик 2

Чтобы увеличить расстояние между ячейками в таблице, используют атрибут «cellspacing» к тегу <table>

<table border="1" cellspacing="7" >

В значениях у атрибута «cellspacing» указываете расстояние между ячейками

<table border="1" cellspacing="7" >
<tr>
<td>ряд 1 столбик 1</td>
<td>столбик 2</td>
</tr>
</table>

Результат:

ряд 1 столбик 1

столбик 2

○ Как сделать фон таблицы HTML

Чтобы сделать фон таблицы HTML используют к тегу <table> и <td> такие атрибуты:

• BGCOLOR –  цвет фона всей таблицы или к каждой ячейке по отдельности. Цвет задается кодом или словом.
• BACKGROUND –фон в таблице заполняется рисунком.

<html>
<head>
<title>Таблицы в HTML – StepkinBlog.ru</title>
</head>
<body>
<table border="1" cellpadding="20" background="fon.jpg">
<tr>
<td bgcolor="#33FF99">ряд -1 /столбик 1</td>
<td colspan="3">столбик 2 </td>
<td rowspan="2">столбик 3</td>
</tr>
<tr>
<td bgcolor="red">ряд -2 /столбик 1</td>
<td >столбик 2 </td>
<td>столбик 3</td>
<td>столбик 4</td>
</tr>
</table>
</body>
</html>

Результат:

ряд -1 /столбик 1	столбик 2			столбик 3
ряд -2 /столбик 1	столбик 2	столбик 3	столбик 4

○ Как вставить картинку в таблицу HTML

Чтобы вставить картинку в таблицу HTML, между тегом <td> вставляться тег <img>.

<td><img src="1.gif"></td>

Пример:

<table border="1">
<tr>
<td>ряд 1 ячейка 1</td>
<td>ячейка 2</td>
<td><img src="1.gif"></td>
</tr>
</table>

Результат:

ряд 1 ячейка 1

ячейка 2

○ Ширина и высота таблицы HTML

Чтобы вставить ширину и высоту в таблицы HTML, используют к тегу <table> атрибут «width» и «height»:

<table border="1">

• Width – ширина таблицы
• Height – высота таблицы

Пример:

<table border="1">
<tr>
<td>ряд 1 ячейка 1</td>
<td>ячейка 2</td>
</tr>
<tr>
<td>ряд 2 ячейка 1</td>
<td>ячейка 2</td>
</tr>
</table>

Результат:

ряд 1 ячейка 1	ячейка 2
ряд 2 ячейка 1	ячейка 2

Значения задаются в пикселях (px)  или  в процентах (%)

○ Выравнивание содержимого в таблице HTML

Чтобы выровнять содержимое в таблице HTML, используют к тегу  <td> атрибут «align» и «valign»:

ALIGN – горизонтальное выравнивание содержимого в таблице.
Значения:

• left — прижать содержимое к левой части (по умолчанию);
• center – установить по центру;
• right — прижать содержимое к правой части

VALIGN – вертикальное выравнивание содержимого в таблице.
Значения:

• top – прижать содержимое к верху;
• bottom – прижать содержимое к низу;
• middle – установить содержимое посередине

<td align="center" valign="middle">текст</td>

Пример:

<table border="1">
<tr>
<td>ячейка по умолчанию</td>
<td align="right" valign="bottom">содержимое выравниваем горизонтально по правому краю, вертикально - прижимаем к низу</td>
</tr>
<tr>
<td align="left" valign="top">содержимое выравниваем горизонтально по левому краю, вертикально - прижимаем к верху</td>
<td align="center" valign="middle">содержимое выравниваем горизонтально по центру, вертикально - прижимаем посредине</td>
</tr>
</table>

Результат:

ячейка по умолчанию	содержимое выравниваем горизонтально по правому краю, вертикально — прижимаем к низу
содержимое выравниваем горизонтально по левому краю, вертикально — прижимаем к верху	содержимое выравниваем горизонтально по центру, вертикально — прижимаем посредине

○ Как выровнять таблице HTML по центру

Чтобы выровнять таблицу по центру, нужно обхватить таблицу тегом <center></center>:

<center>
Код таблицы
</center>

Пример:

<center>
<table border="1">
<tr>
<td>ряд -1 /столбик 1</td>
<td>столбик 2 </td>
<td>столбик 3</td>
</tr>
</table>
</center>

Дополнительные и основные теги к таблице

Тег	Описание
<table>	Родительский тег таблиц (основной)
<thead>	Тег строк заголовка таблицы (дополнительный)
<tr>	ряд таблицы (основной)
<td>	Ячейка (столбик) таблицы (основной)
<th>	Ячейка заголовка таблицы Должен использоваться внутри тега <thead> (дополнительный)
<caption>	Описание или краткое содержание таблицы (дополнительный)

Пример:

<table border="1">
<caption>Таблица для StepkinBlog.ru</caption>
<thead>
<tr>
<th>Название 1</th>
<th>Название 2</th>
 </tr>
 </thead>
<tr>
<td>1</td>
<td>2</td>
 </tr>
</table>

Результат:

Таблица для StepkinBlog.ru

Название 1	Название 2
1	2

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

Предыдущая запись
Как прописать путь к файлу, картинке или странице. Основы HTML для начинающих. Урок №13 Следующая запись
Как сделать карту изображения в HTML(навигационная карта). Основы HTML для начинающих. Урок №15