/
Как привлечь посетителей на сайт. Несколько простых советов Bootstrap или Grid - что лучше использовать для адаптивности сайта? Что такое доменное имя сайта и как выбрать доменное имя для сайта ? Анализ страниц поисковыми машинами Какую выбрать тематику сайта ?

Как привлечь посетителей на сайт. Несколько простых советов


Доступны многочисленные ресурсы, в которых подробно рассказывается, как привлечь трафик на свой веб-сайт. Однако одной лишь возможности привлечь трафик на сайт недостаточно. 25 дней назад
Как привлечь посетителей на сайт. Несколько простых советов
Как привлечь посетителей на сайт. Несколько простых советов
Bootstrap или Grid - что лучше использовать для адаптивности сайта?
Bootstrap или Grid - что лучше использовать для адаптивности сайта?
Что такое доменное имя сайта и как выбрать доменное имя для сайта ?
Что такое доменное имя сайта и как выбрать доменное имя для сайта ?
Анализ страниц поисковыми машинами
Анализ страниц поисковыми машинами
Какую выбрать тематику сайта ?
Какую выбрать тематику сайта ?

Урок 9. Таблицы в HTML

Урок 9. Таблицы в HTML

Таблицы в HTML.

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

Таблицы в данное время остаются не маловажным элементом в создании и верстке сайта.

Для добавления таблицы используется тег <table>. C помощью тега <tr> (table row — строка таблицы) можно добавить строку в таблицу, а для разделения строк на столбцы используется тег <td> (table data — данные таблицы).

<table>
<tr>
<td>Ячейка 1</td>
<td>Ячейка 2</td>
</tr>
</table>
 

Таблицы в HTML _1

Содержимое таблицы располагается между тегами <td>, помимо текста в таблицу можно вставить изображения, списки, другие таблицы и прочее.

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

<table>
<tr>
<th>Наименование 1</th>
<th>Наименование 2</th>
</tr>
<tr>
<td>Ячейка 1</td>
<td>Ячейка 2</td>
</tr>
</table>
 

Таблицы в HTML_2

Заголовок таблицы

Таблице можно назначить заголовок при помощи тега <caption>, тег <caption> использует атрибут align который имеет несколько значений для изменения положения заголовка:

  • right — выравнивание заголовка по правому краю.
  • left — выравнивание заголовка по левому краю.
  • top — выравнивание заголовка вверху и по центру таблицы.
  • bottom — заголовок располагается внизу таблицы и будет выравнен по центру.
<table>
<caption align="bottom">Пример таблицы</caption>
<tr>
<th>Наименование 1</th>
<th>Наименование 2</th>
</tr>
<tr>
<td>Ячейка 1</td>
<td>Ячейка 2</td>
</tr>
</table>
 

Таблицы в HTML_3

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

Для заключения таблицы в рамку используйте атрибут border, чтобы выровнять таблицу по определенному краю используйте изученный ранееатрибут align

<table border="1" align="center">
<caption align="bottom">Пример таблицы</caption>
<tr>
<th>Наименование 1</th>
<th>Наименование 2</th>
</tr>
<tr>
<td>Ячейка 1</td>
<td>Ячейка 2</td>
</tr>
</table>
 

Таблицы в HTML_4

Объединение строк и столбцов таблицы

Для объединения двух и более столбцов в одну ячейку используйте атрибут colspan, а для объединения двух и более строк используется атрибут rowspan.

<table border="1" align="center">
<caption align="bottom">Пример таблицы</caption>
<tr>
<td rowspan="2">Ячейка 1</td>
<th colspan="2">Ячейка 2</th>
</tr>
<tr>
<td>Ячейка 3</td>
<td>Ячейка 4</td>
</tr>
</table>
 

Таблицы в HTML_5

Задний фон ячейки

Также в таблице можно выделить задний фон ячейки определенным цветом при помощи атрибута bgcolor

<table border="1" align="center">
<caption align="bottom">Пример таблицы</caption>
<tr>
<td rowspan="2">Ячейка 1</td>
<th colspan="2">Ячейка 2</th>
</tr>
<tr>
<td bgcolor="yellow">Ячейка 3</td>
<td bgcolor="blue">Ячейка 4</td>
</tr>
</table>
 

Таблицы в HTML_6

Ширина таблицы, выравнивание содержимого, увеличение отступа от содержимого

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

По умолчанию содержимое ячеек прижато к левому краю, если использовать атрибут align в теге <tr> все содержимое строки будет выровнено по заданному краю.

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

<table border="1" align="center" width="250" cellpadding="5">
<caption align="bottom">Пример таблицы</caption>
<tr>
<td rowspan="2">Ячейка 1</td>
<th colspan="2">Ячейка 2</th>
</tr>
<tr align="center">
<td bgcolor="yellow">Ячейка 3</td>
<td bgcolor="blue">Ячейка 4</td>
</tr>
</table>
 

Таблицы в HTML_5

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

19:09
354
RSS
Нет комментариев. Ваш будет первым!
Загрузка...