Загрузка

RUS | ANG | |

StepkinBlog.ru

Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, Wordpress, Bootstrap

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

09.11.2015


14:07


28385


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

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



Случайные записи:

  1. Установка локального сервера на компьютер. Основы PHP с нуля. Урок №3
  2. Пагинация (pagination) – Bootstrap3
  3. Как сделать горизонтальную линию HTML. Основы HTML для начинающих. Урок №10
  4. Альтернативный синтаксис управляющих структур. Основы PHP с нуля. Урок №15
  5. Создание списков на HTML. Основы HTML для начинающих. Урок №8

Последние записи рубрики:

  1. Бесплатный курс по основам HTML
  2. Шпаргалка по HTML на русском языке
  3. Создание простого мини сайта. Практика по пройдённому материалу
  4. Тесты HTML онлайн. Основы HTML для начинающих
  5. Как прописать мета теги. Основы HTML для начинающих. Урок №21

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

  1. Антон says:

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

    Ответить

    Степка
    Степка ответил(а) на комментарий:

    Здравствуйте, Антон! Не совсем Вас понял!
    Попробуйте еще раз все объяснит по порядку.

    Ответить

    Антон ответил(а) на комментарий:

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

    Степка
    Степка ответил(а) на комментарий:

    Здесь вы найдете ответ "Основы HTML"!
    Посмотрите урок "Как вставить ссылку в HTML." и "Создание простого мини сайта."

  2. noname says:

    Проходил ваш тест - №8 Чтобы создать столбик в таблице HTML, используют тег. Дал ответ , поидее в вопросе заведомо ошибка присутствует.

    Серьёзно, столбик ? Столбик КРАЛ! :?:

    Ответить

    Степка
    Степка ответил(а) на комментарий:

    нет ошибки, там все верно!
    Столбик, тег:

    <td>столбик 1 </td>

    В чем ошибка?

    Ответить

  3. Антон says:

    С таблицей всю нормальна,вы знаете как делать таблицу для быстрых ссылок Яндекса.

    Ответить

    Степка
    Степка ответил(а) на комментарий:

    Именно таблицу для быстрых ссылок Яндекса? Впервые слышу.
    Для чего это нужно? Вы про сниппеты?

    Ответить

  4. Антон says:

    Да я имел виду сниппеты..,подскажите как правильно сделать.

    Ответить

    Степка
    Степка ответил(а) на комментарий:

    Антон, с большим уважением отношусь к Вам, но давайте писать комментарий по теме! Не нужно захламлять страницу!

    Ответить

  5. Ильяс says:

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

    Ответить

    Ильяс ответил(а) на комментарий:

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

    Родословная моей семьи
    Костин Н.А.
    1883-1936
    Костина А.А.
    18..-1953

    Ответить

    Степка
    Степка ответил(а) на комментарий:

    В CSS пропишите:

    table {
    display:inline;
    margin-right:10px;
    }
    

    В строке №10 меняйте параметры и расстояние между таблицами будет меняться.

    Степка
    Степка ответил(а) на комментарий:

    Нужно через CSS:

    table {
    display:inline;
    margin-right:10px;
    }
    

    Ответить

  6. newJS says:

    Не моё собачье дело, но использование тега center, атрибутов align и valign, как то не кошерно на сегодня.

    Ответить

    Степка
    Степка ответил(а) на комментарий:

    а что кошерно?

    Ответить

  7. Александр says:

    Здравствуйте!
    По поводу создания таблицы вопросов нет. Все предельно ясно и хорошо объяснили. Но есть другой вопрос, как создать таблицу, в которой можно вводить определенные значения с клавиатуры и потом сохранять их? Это делается как то при помощи form или css?

    Ответить

    Степка
    Степка ответил(а) на комментарий:

    Здравствуйте, Андрей!
    Тут уже нужен не формы HTML + PHP

    Ответить

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

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Подписаться на обновления:

Подпишись на обновления моего блога через e-m@il:

@

Реклама на блоге:

Мои цели на
2017 год:

Довести количество статей до 150

Доделать этот блог

Закончить тему «Основы CSS»

Закончить тему «Основы PHP»

Начать тему «Основы JavaScript»

Добиться посещаемости 500 чел/сутки

Статистика:

Записей: 104
Страниц: 3
Рубрик: 9
Меток: 11
Комментариев: 245