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

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

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


09.11.2015


14:07


26531


18


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

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

 

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

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

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

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

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

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

<table></table>

○ тег TR

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

 ряд 1  ряд 1

Ряды создаются с помощью тега <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>

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

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

Атрибуты

Границы таблицы в 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» :idea:.

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

Чтобы объединить ячейки в таблице используют атрибуты «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  :arrow:

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

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

<table border="1" width="300" height="200">
  • Width – ширина таблицы
  • Height – высота таблицы

Пример:

<table border="1" width="300" height="200"> <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" width="100%" height="200"> <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

Добавить комментарий

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

Похожие статьи:




Схемы и таблицы по теории и государства и права 9




Схемы вязания детских шапочек для девочек с ушками




Столы стулья табуретки своими руками из дерева 7




Простые поздравления с днем рождения бабушку




Как проверить подходит ли тебе прическа мужская