атрибут «border»
, граница в таблице тоже видна не будет.
Границы таблицы в HTML – сайт
| ряд -1 /столбик 1 |
столбик 2 |
столбик 3 |
Результат:
Попробуйте поменять значение в атрибуте «border»
на «10»
.
○ Как объединить ячейки в таблице
Чтобы объединить ячейки в таблице используют атрибуты «colspan»
и «rowspan»
к тегу <
td
>
.
- colspan
- объединение ячеек по горизонтали;
- rowspan
- объединение ячеек по вертикали.
|
В значениях указываете, сколько нужно объединить ячеек.
| ряд 1 столбик 1 |
| ряд 2 столбик 1 |
ряд 2 столбик 2 |
Результат:
| ряд 1 столбик 1 |
ряд 1 столбик 2 |
| ряд 2 столбик 1 |
Результат:
Более сложный пример:
Таблицы в HTML – сайт
| ряд -1 /столбик 1 |
столбик 2 |
столбик 3 |
| ряд -2 /столбик 1 |
столбик 2 |
столбик 3 |
столбик 4 |
Результат:
○ Как увеличить расстояние между ячейками таблицы
Чтобы увеличить расстояние между текстом и границей ячейки, прописывают атрибут «cellpadding»
к тегу
В значениях у атрибута «cellpadding»
указываете расстояние отступа
| ряд 1 столбик 1 |
столбик 2 |
Результат:
Чтобы увеличить расстояние между ячейками в таблице, используют атрибут «cellspacing»
к тегу
В значениях у атрибута «cellspacing»
указываете расстояние между ячейками
| ряд 1 столбик 1 |
столбик 2 |
Результат:
○ Как сделать фон таблицы HTML
Чтобы сделать фон таблицы HTML используют к тегу
и
такие атрибуты:
- BGCOLOR
– цвет фона всей таблицы или к каждой ячейке по отдельности. Цвет задается кодом или словом.
- BACKGROUND
–фон в таблице заполняется рисунком.
Таблицы в HTML – сайт
| ряд -1 /столбик 1 |
столбик 2 |
столбик 3 |
| ряд -2 /столбик 1 |
столбик 2 |
столбик 3 |
столбик 4 |
Результат:
○ Как вставить картинку в таблицу HTML
Чтобы вставить картинку в таблицу HTML, между тегом |
вставляться тег ![]()
.
|  |
| ряд 1 ячейка 1 |
ячейка 2 |
|
Результат:
Значения задаются в пикселях (px)
или в процентах (%)
○ Выравнивание содержимого в таблице HTML
Чтобы выровнять содержимое в таблице HTML, используют к тегу
атрибут «align»
и «valign»
:
ALIGN
– горизонтальное выравнивание содержимого в таблице.
Значения:
- left
-
прижать содержимое к левой части (по умолчанию)
;
- center
–
установить по центру;
- right
-
прижать содержимое к правой части
VALIGN
– вертикальное выравнивание содержимого в таблице.
Значения:
- top
–
прижать содержимое к верху;
- bottom
–
прижать содержимое к низу;
- middle
–
установить содержимое посередине
| текст |
| ячейка по умолчанию |
содержимое выравниваем горизонтально по правому краю, вертикально - прижимаем к низу |
| содержимое выравниваем горизонтально по левому краю, вертикально - прижимаем к верху |
содержимое выравниваем горизонтально по центру, вертикально - прижимаем посредине |
Результат:
○ Как выровнять таблице HTML по центру
Чтобы выровнять таблицу по центру, нужно обхватить таблицу тегом
:
Код таблицы
| ряд -1 /столбик 1 |
столбик 2 |
столбик 3 |
Дополнительные и основные теги к таблице
Таблица для сайт
| Название 1 |
Название 2 |
| 1 |
2 |
Результат:
Вот и закончили с таблицами. Вы теперь сможете самостоятельно создать таблицу любой сложности. Закрепите данный урок. Попробуйте самостоятельно создать любую таблицу.
Жду вас в следующем уроке. Подписывайтесь на обновления моего блога.
Предыдущая запись
Следующая запись
Доброго всем времени суток, мои дорогие друзья. Как лето проходит? Я надеюсь, что у всех всё хорошо. Ну а сегодня мы продолжим изучать основы html и сегодня будет наверное последний урок на эту тему, потому что дальше мы окунемся уже в CSS. Так вот, говоря об html, я не могу не рассказать про таблицы, так как они тоже являются довольно значимой темой. Взять хотя бы тот же вордпресс. По умолчанию в этом движке нельзя создать таблицу. Нужен либо специальное дополнение (плагин), либо специальный программный код (скрипт). Но можно просто сделать то, что мы хотим с помощью простых тегов. В общем сегодня я вам расскажу как создать таблицу в html, так как это действительно может очень вас выручить. Помнится мне, как свои первые сайты я верстал с помощью табличной верстки, т.е. шапка, сайдбары, футер и контентный блок были всего лишь элементами таблицы. Об этом я упоминал в своей статье о . Правда сегодня сайты уже вообще не принято делать с помощью таблиц, но это не значит, что они не нужны. Скорее наоборот. Что еще хорошо, так это то, что вам даже не придется ничего чертить. Всё делается в обычном блокноте (ну или другом, типа Notepad++), причем довольно легко. В общем давайте настраиваться на работу. 
Теги Здесь разметка происходит несколько сложнее, чем в других тегах, но это всё быстро запоминается. Так что смотрим и не отвлекаемся. Любая таблица всегда заключается в парный тег
. Т.е. эти знаки дают команду, что здесь будет располагаться таблица. Внутри table ставится парный тег |
. Данная пара означает, что мы создали одну строку в таблице, и сколько таких тегов будет прописано, столько строк и будет. 
Ну а внутри |
мы теперь проставляем еще одну пару — |
. Данная пара означает, что мы создали один столбец в данной строке, и если в каждом tr прописать несколько td, то тогда в данной строчке будет несколько столбцов. Понятно? Если нет, то давайте посмотрим на примере, как тут всё устроено... Допустим я хочу создать таблицу учеников и отметок. Тогда пишем следующее внутри тега
:
|
Математика |
Русский язык |
История |
| Медведев |
3 |
5 |
5 |
| Смирнов |
5 |
5 |
5 |
| Соколов |
3 |
2 |
3 |
Что мы здесь сделали? А сделали мы четыре строки (tr), в каждой из которых содержится по четыре таблицы (td). В первом блоке tr мы написали название учебных дисциплин, при этом оставив первый столбец пустым, чтобы не нарушить таблицу. Далее в каждую первую пару td
мы вставляем фамилии учеников, а все остальные td
заполняем оценки в соответствующей ячейке. В общем напишите это и сохраните файл, после чего откройте его в браузере, тогда вы сами всё поймете как это происходит. 
Но зайдя в документ мы видим, что таблица не совсем похожа на то, что мы планировали. А чего тут не хватает? Правильно — границ. Но вы не переживайте. Об этом я вам расскажу чуть ниже. Но для приличия я покажу вам еще один тег, который выделяет и центрирует данные в таблицах. Этот тег пишется как
. Давайте выделим наши заголовки в таблице. Для этого просто замените теги td
, на th
в тех местах, где у нас пишутся фамилии и названия дисциплин. 
И смотрим, что у нас получится благодаря этому. Как я и говорил, теперь данные названия центрированы и выделены. Этого-то мы и добивались. 
В общем с тегами мы вроде разобрались. Хотя есть еще и другие (можете посмотреть на htmlbook), но я не буду заострять на них внимание. Атрибуты Естественно такая вещь как таблицы не может обойтись без специальных атрибутов и я вам покажу некоторые из них. Граница (border) Ну и начать бы я хотел с того, о чем говорил выше, то бшь о границах. По умолчанию их нет, поэтому таблица выходит невзрачной и не совсем понятной. Но это можно исправить, и поможет нам в этом атрибут border, который ставится непосредственно в открывающий тег
. Сделайте так, как я показал вам в примере ниже, то есть поставьте значение атрибута border="1"
. 
После того, как вы сделаете это, сохраните результат и запустите документ. Ну что? Совсем ведь другое дело. Теперь таблица приобрела нормальные очертания и выглядит как надо. Вы можете поэкспериментировать с различными значениями бордера и посмотреть, что в вашем конкретном случае наиболее вам подойдет. 
Отступ и расстояние (cellpadding и cellspacing) Совершенно естественно, что одно отображение таблицы на все случаи жизни устроит не всех. Но мы можем это немного изменить, благодаря двум похожим атрибутам. Cellpadding="«
— изменяет расстояние от самой рамки до содержимого в ячейке. Тем самым все ячейки в таблице становятся больше. Давайте напишем этот атрибут в таблице, а значение поставим равное 5, и посмотрим чем оно будет отличаться от первоначального варианта. Хоп. Видите? Расстояние увеличилось. таким образом вы сможете сами подставлять нужные значения, расширяя тем самым ячейки. Cellspacing=»"
— изменяет расстояние между ячейкми таблицы и его значения также измеряются с пикселях. Давайте попробуем также поставить этот атрибут со значением равным 5 и увидим, что из этого получится. 
Ну что? Суть ясна? Как видите, расстояние между ячейками стало шире. Именно этого мы с вами и добивались. 
Выравнивание (Align) Ну куда же мы без этого замечательного атрибута, который позволяет нам выровнять всё по разным местам? Align работает точно также, как и с другими тегами, которые мы проходили ранее и имеет три значения: Давайте пропишем каждое из значений и посмотрим, как будет распределяться таблица. 
Ну что? Вроде всё работает и я думаю, что должно быть понятно. Но если возникают какие-либо вопросы, то вы не стесняйтесь, спрашивайте. 
Ну вот в принципе и всё, что я хотел рассказать сегодня о таблицах. Надеюсь, что вам всё было понятно. Ну а если вы хотите подробно изучить все тонкости работы с HTML и CSS и научиться верстать сайты самостоятельно, то я вам настоятельно рекомендую посмотреть превосходнейший видеокурс
на данную тему. Для новичка это самый понятный, как по мне, видеокурс, в котором вам просто всё разжуют и разложат по полочкам. Ну а я свой урок на сегодня завершаю. Не забывайте подписываться на обновления моего блога, чтобы не пропустить какую-либо важную информацию или новости. А мы с вами увидимся в других статьях. Удачи вам и пока-пока! С уважением, Дмитрий Костин.
То таблицы играют очень важную роль в создании невидимого каркаса для веб-страницы. А это поможет равномерно и красиво расположить текст, меню, картинки и т.д.
Для лучшего понимания, о чем я пытаюсь вам рассказать, посмотрите на пример каркаса веб-страницы:
Итак, как в HTML сделать простую таблицу
?
Для постройки таблицы необходимо использовать три тега:
TABLE
–
этот тег нужен для открытия таблицы. Это, своего рода, контейнер, в котором содержатся другие элементы. Вот загнул так, что без пончика не разобраться. Ничего, разберетесь, когда увидите пример.
Закрывающий тег
обязателен.
Таблица состоит из ряда
| ряд 1
|
ряд 1
|
| ряд 2
|
ряд 2
|
| ряд 3
|
ряд 3
|
| ячейка 1
|
ячейка 2
|
| ячейка 1
|
ячейка 2
|
| ячейка 1
|
ячейка 2
|
TR
–
создает новый ряд таблицы. Закрывающий тег
обязателен.
TD
–
создает новую ячейку в ряду. Закрывающий тег
обязателен.
Давайте рассмотрим пример, чтобы лучше понять все выше сказанное:
Таблицы в HTML
| ряд 1 ячейка1 | ряд1 ячейка2 |
| ряд 2 ячейка 1 | ряд 2 ячейка 2 |
| ряд 3 ячейка 1 | ряд 3 ячейка 2 |
Вот результат:
| ряд 1 ячейка1
|
ряд1 ячейка2
|
| ряд 2 ячейка 1
|
ряд 2 ячейка 2
|
| ряд 3 ячейка 1
|
ряд 3 ячейка 2
|
Давайте все объясню.
Перед каждым созданием новой таблицы открывается тег
.
Дальше, размещаем в середине контейнера
тег
, что говорит о начале нового ряда.
В этом ряду вставляем две ячейки с содержанием при помощи тега
ряд 1 ячейка1
|
ряд1 ячейка2
|
Закрываем ряд тегом
.
Открываем другой ряд тегом
Закрываем ряд тегом
.
Открываем третий ряд тегом
и вставляем в него снова две ячейки.
Закрываем ряд тегом
.
Закрываем таблицу тегом
.
Я думаю, разобрались? Если кто-то забыл, что такое атрибут border
, который я использую вместе с тегом
, напоминаю, что это толщина рамки. Если в border
будет установлено значение «0»
, тогда границы таблицы будут невидимые.
Посмотрите парочку примеров созданных таблиц
и можно идти дальше:
Таблицы в HTML
| ряд 1 ячейка 1 |
| ряд 2 ячейка 1 |
Результат:
Для того чтобы вставить картинку в таблицу, нужно владеть элементарными начальными знаниями о том, как вставляется изображение в HTML файл. Об этом я рассказываю в . Теперь, когда вы знаете основные нюансы об изображении в HTML, можно попробовать вставить картинку в таблицу. Это можно сделать следующим образом:
в строку между тегами |
вставить изображение.
Таблицы в HTML
| ряд 1 ячейка 1 |
ряд 1 ячейка 2 |
|
Результат:
| ряд 1 ячейка 1
|
ряд 1 ячейка 2
|
|
А как объединить ячейки в таблице?
Чтобы объединить ячейки в таблице, вам нужно использовать такие атрибуты:
COLSPAN
– определяет количество столбцов.
По умолчанию значение 1.
ROWSPAN
– определяет количество рядов.
По умолчанию значение 1.
объединяем ячейки
в верхнем ряду с помощью атрибута colspan
:
Таблицы в HTML
| ряд 1 ячейка 1+2 |
| ряд 2 ячейка 1 | ряд 2 ячейка 2 |
Результат:
Как установить размер таблицы?
Чтобы задать высоту и ширину таблицы, воспользуйтесь такими атрибутами:
WIDTH
– ширина таблицы. Размер задается в пикселях или в процентах.
HEIGHT
– высота таблицы. Размер задается в пикселях или в процентах.
Таблицы в HTML
| ряд 1 ячейка1 | ряд1 ячейка2 |
| ряд 2 ячейка 1 | ряд 2 ячейка 2 |
Результат:
Выравнивание содержимого в таблице
Чтобы выровнять внутри таблицы содержимое (текст, картинки), можно воспользоваться такими атрибутами:
ALIGN
– горизонтальное выравнивание содержимого в таблице.
К атрибуту ALIGN
присваивается значения: left
(по умолчанию)
, center
,
right
.
left
-
прижать содержимое к левой части;
center
–
установить по центру;
right
-
прижать содержимое к правой части
VALIGN
– вертикальное выравнивание содержимого в таблице.
К атрибуту VALIGN
присваивается значения: top
, bottom
, middle
.
top
–
прижать содержимое к верху;
bottom
–
прижать содержимое к низу;
middle
–
установить содержимое посередине
Таблицы в HTML
| ряд 1 ячейка1 |
ряд1 ячейка2 |
| ряд 2 ячейка 1 |
ряд 2 ячейка 2 |
Результат:
Как сделать фон таблицы?
Можно также задать фон таблице для всех ее ячеек вместе взятых, а также для каждой ячейки по отдельности. Можно задать фон цветом, а можно и картинкой. Для фона существуют два атрибута:
BGCOLOR
– цвет фона всей таблицы или к каждой ячейке по отдельности. Цвет задается кодом или словом.
BACKGROUND
–фон в таблице заполняется рисунком.
Внимание:
если вы ходите задать фон цветом или фоновым рисунком всей таблице, атрибуты нужно установить в теге
. А если только к определенной ячейке, тогда в тег |
.
Для лучшего понимания посмотрите пример:
Таблицы в HTML
| ряд 1 ячейка1 |
ряд1 ячейка2 |
| ряд 2 ячейка 1 |
ряд 2 ячейка 2 |
Результат:
Внимание:
если картинка по размеру меньше за ячейку, тогда она будет повторяться, пока не заполнит ячейку до конца. Если картинка больше за ячейку, тогда фон картинки будет обрезан по размерам ячейки.
И напоследок расскажу еще о двух полезных атрибутах
.
В случае, если вам вдруг захочется увеличить расстояние между всеми ячейками, помогут следующие атрибуты:
CELLPADDING
–расстояние между рамкой каждой ячейки html таблицы и содержимым в ней материалом.
Таблицы в HTML
| ряд 1 ячейка1 |
ряд1 ячейка2 |
| ряд 2 ячейка 1 |
ряд 2 ячейка 2 |
Результат:
| ряд 1 ячейка1
|
ряд1 ячейка2
|
| ряд 2 ячейка 1
|
ряд 2 ячейка 2
|
CELLSPACING
–расстояние между границами соседних ячеек.
Таблицы в HTML
| ряд 1 ячейка1 |
ряд1 ячейка2 |
| ряд 2 ячейка 1 |
ряд 2 ячейка 2 |
Результат:
| ряд 1 ячейка1
|
ряд1 ячейка2
|
| ряд 2 ячейка 1
|
ряд 2 ячейка 2
|
Фух, рассказал!
Надеюсь, с задачей я справился и доступно объяснил все, что я знал про html таблицы
. А вам, рекомендую хорошо закрепить материал.
Попробуйте создать собственную таблицу, а лучше целый каркас для веб-страницы из таблицы html.
Всего вам хорошего!
Спасибо, что посетили мой блог
Таблицы - одни из наиболее важных, но в тоже время сложных элементов, которые должны присутствовать на веб-страницах. С их помощью удобно подавать важную и полезную информацию в довольно сжатой форме. Конечно, большинство редакторов в шаблонах, работающих на различных движках, позволяют автоматически вставлять таблицу на страницу сайта или отдельной публикации, но что, если дизайн веб-ресурса, его страницы создаются с нуля? Тогда перед начинающим мастером может встать проблема: как сделать Давайте разберемся, как же правильно и быстро создать данный элемент. Выбираем редакторВ первую очередь, приступая к созданию таблицы, следует определиться с редактором, в котором вы будете работать. Конечно, проще всего выбрать ту программу, в которой вы создаете основной код сайта. Но лучше всего использовать для этих целей старый добрый блокнот. Вы можете спросить, для чего усложнять себе жизнь, ведь если делать все сразу в редакторе, то и результат можно увидеть тоже сразу, еще и подсказки программы использовать. Да, это действительно так, но, создавая таблицу с чистого листа, вы не только сможете досконально изучить сам принцип ее создания, но и не допустить досадных опечаток и ошибок в основном коде. Иногда случается так, что курсор случайно перемещается вниз, и в процессе написания в код закрадывается ошибка, которую порой сложно найти. Создав таблицу в блокноте, вы сможете скопировать ее шифр и вставить в нужное вам место. Алгоритм создания таблицыДля начала составим краткий алгоритм, как сделать таблицу в HTML. Это нужно для того, чтобы вы понимали последовательность каждого шага. Затем разберем, как именно выполнять каждый из пунктов. 
Начнем с подготовительных действий. 1. Рисуем на листе бумаги схематическое изображение таблицы. 2. Подсчитываем количество строк и ячеек. Если количество последних разное - считаем для каждого рядочка отдельно. 3. Определяем в строке количество ячеек-заголовков (к примеру, ячейки «№», «Имя» и т. д.). 4. Записываем основные параметры таблицы - цвет, высоту и ширину, выравнивание текста - в общем, все, что вам покажется нужным. 1. Вставляем тэги таблицы. 2. Вставляем тэги строк исходя из того количества, которое вам нужно. 3. В строках вставляем тэги ячеек (обычных и заглавных), также исходя из того количества, которое записано у вас на бумаге. 4. Задаем параметры для таблицы в целом. 5. При надобности задаем показатели для отдельных ячеек. 6. Заполняем наши ячейки текстом. 
Создаем таблицуИтак, вы выбрали редактор, теперь давайте разберемся, как создать таблицу в HTML. Тэг, с помощью которого в код страницы вставляется таблица ( ), является парным, то есть начинается наша конструкция с данного тэга, а заканчивается .Вставив тэги таблицы, переходим к созданию строк и ячеек. Сразу отметим, что данные элементы также являются парными. Тэг | задает строки, а | - ячейки. Для заглавных ячеек следует использовать парный элемент | . Как уже говорилось, первым делом следует оформить строки, затем в них прописывать уже ячейки. Для того чтобы не запутаться, советуем делать либо отступы между каждым блоком в одну-две строчки, либо же прописывать новый блок элементов, используя клавишу "Tab". Как это может выглядеть? Примерно так: ;;| № п/п | ;| Фамилия | ; ;;| 1 | ;| Иванов | ; | ; .
Как видите, ничего сложного в этом нет. Главное - не запутаться в количестве строк и ячеек. Иначе таблицу может перекосить. Мы с вами разобрали создание таблицы в HTML, теперь можем переходить к параметрам как самой матрицы, так и ее строк и ячеек. 
Параметры таблицыКогда код написан, следует обратить внимание на следующие пункты: выравнивание в границ, фона, текста и прочее. Параметры таблицы задаются в тэге . К ним относятся:1. Border - ширина границ. Задается целым числом. По умолчанию границы любой таблицы равны нулю. 2. Bordercolor - цвет границы. Может задаваться как шестнадцатеричным кодом цвета (#00008B), так и его названием на английком (DarkBlue). По умолчанию он всегда серый. 3. Bgcolor - Также задается с помощью кода или названия. 4. Align - выравнивание текста за таблицей. По умолчанию - по левому краю. Есть следующие варианты данного параметра: - left - обтекание справа;
- right -обтекание слева;
- center - вывод таблицы по центру без обтекания.
5. Width и height - ширина и высота таблицы. Может задаваться как в пикселях, так и в процентах (относительно размера браузера окна). Прописывая тот или иной показатель, следует обратить особое внимание на оформление. После указания параметра должен идти знак "равно", после которого в кавычках указывается заданное значение. Что касается цвета текста, то его оформляют так же, как и обычный текст в формате HTML. Пример оформления таблицы: ;;| № п/п | ;| Фамилия | ; ;;| 1 | ;| Иванов | ; | ; .
Параметры строкИтак, мы уже разобрались, как сделать таблицу в HTML и прописать основные ее параметры. Но что, если нам нужно выделить строку? Оформить ее не так, как основной текст таблицы? Параметры строки прописываются в тэге точно так же, как и данные таблицы. Для строки могут задаваться следующие переменные:1. Уже известные вам border, bordercolor и bgcolor. 2. Align - выравнивание текста в строке. Может принимать значения left, center и right. 3. Valign - данный тэг выравнивает текст по вертикали. Принимает следующие значения: - top - текст выравнивается по верхней границе;
- middle - по центру;
- bottom - по нижней границе.
Пример оформления строки: Параметры ячеекИ последнее, на что стоит обратить внимание тем, кто желает знать, как сделать таблицу в HTML - параметры отдельных ячеек, как обычных, так и заглавных. По сути, все делается точно так же, как и для таблицы или строки. Единственное, добавляется еще два немаловажных элемента: 1. Colspan - данный параметр указывает количество столбцов, на которые может простираться ячейка. 2. Rowspan - указывает уже количество строк, которое занимает данная ячейка. Так как оформление ничем не отличается от прописывания строки, то не будем приводить пример кода. 
ВыводыСделать таблицу не так сложно, как может показаться на первый взгляд. Главное при написании ее кода - усидчивость и внимание. Что касается того, как вставить таблицу в HTML, то ее шифр достаточно скопировать и вставить именно в то место вашей страницы, в котором она, по вашему мнению, должна располагаться. Не бойтесь экспериментировать, и вскоре вы в совершенстве овладеете техникой создания таблиц. Успехов!
Обновлено: 20.04.2021
103583
Если заметили ошибку, выделите фрагмент текста и нажмите Ctrl+Enter
|
| |
Copyright © 2024 sukachoff.ru - Windows. Вирусы. Ноутбуки. Интернет. Office. Утилиты. Драйверы
