/
Что такое доменное имя сайта и как выбрать доменное имя для сайта ? Анализ страниц поисковыми машинами Какую выбрать тематику сайта ? Seo-копирайтинг в двух словах Уровень вложенности страницы что это ?

Что такое доменное имя сайта и как выбрать доменное имя для сайта ?


Что такое доменное имя сайта? Доменное имя – это определенный набор символов, который используется для того, чтобы абсолютно любой пользователь интернета смог найти нужный ему ресурс. 15 дней назад
Что такое доменное имя сайта и как выбрать доменное имя для сайта ?
Что такое доменное имя сайта и как выбрать доменное имя для сайта ?
Анализ страниц поисковыми машинами
Анализ страниц поисковыми машинами
Какую выбрать тематику сайта ?
Какую выбрать тематику сайта ?
Seo-копирайтинг в двух словах
Seo-копирайтинг в двух словах
Уровень вложенности страницы что это ?
Уровень вложенности страницы что это ?

Урок 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
43
RSS
Нет комментариев. Ваш будет первым!
Загрузка...