Как создавать таблицы в html. Уральский государственный педагогический университет
Таблицы - одни из наиболее важных, но в тоже время сложных элементов, которые должны присутствовать на веб-страницах. С их помощью удобно подавать важную и полезную информацию в довольно сжатой форме. Конечно, большинство редакторов в шаблонах, работающих на различных движках, позволяют автоматически вставлять таблицу на страницу сайта или отдельной публикации, но что, если дизайн веб-ресурса, его страницы создаются с нуля? Тогда перед начинающим мастером может встать проблема: как сделать Давайте разберемся, как же правильно и быстро создать данный элемент.
Выбираем редактор
В первую очередь, приступая к созданию таблицы, следует определиться с редактором, в котором вы будете работать. Конечно, проще всего выбрать ту программу, в которой вы создаете основной код сайта. Но лучше всего использовать для этих целей старый добрый блокнот.
Вы можете спросить, для чего усложнять себе жизнь, ведь если делать все сразу в редакторе, то и результат можно увидеть тоже сразу, еще и подсказки программы использовать.
Да, это действительно так, но, создавая таблицу с чистого листа, вы не только сможете досконально изучить сам принцип ее создания, но и не допустить досадных опечаток и ошибок в основном коде. Иногда случается так, что курсор случайно перемещается вниз, и в процессе написания в код закрадывается ошибка, которую порой сложно найти. Создав таблицу в блокноте, вы сможете скопировать ее шифр и вставить в нужное вам место.
Алгоритм создания таблицы
Для начала составим краткий алгоритм, как сделать таблицу в HTML. Это нужно для того, чтобы вы понимали последовательность каждого шага. Затем разберем, как именно выполнять каждый из пунктов.
Начнем с подготовительных действий.
1. Рисуем на листе бумаги схематическое изображение таблицы.
2. Подсчитываем количество строк и ячеек. Если количество последних разное - считаем для каждого рядочка отдельно.
3. Определяем в строке количество ячеек-заголовков (к примеру, ячейки «№», «Имя» и т. д.).
4. Записываем основные параметры таблицы - цвет, высоту и ширину, выравнивание текста - в общем, все, что вам покажется нужным.
1. Вставляем тэги таблицы.
2. Вставляем тэги строк исходя из того количества, которое вам нужно.
3. В строках вставляем тэги ячеек (обычных и заглавных), также исходя из того количества, которое записано у вас на бумаге.
4. Задаем параметры для таблицы в целом.
5. При надобности задаем показатели для отдельных ячеек.
6. Заполняем наши ячейки текстом.
Создаем таблицу
Итак, вы выбрали редактор, теперь давайте разберемся, как создать таблицу в HTML. Тэг, с помощью которого в код страницы вставляется таблица (
Вставив тэги таблицы, переходим к созданию строк и ячеек.
Сразу отметим, что данные элементы также являются парными. Тэг
Для заглавных ячеек следует использовать парный элемент
Как уже говорилось, первым делом следует оформить строки, затем в них прописывать уже ячейки. Для того чтобы не запутаться, советуем делать либо отступы между каждым блоком в одну-две строчки, либо же прописывать новый блок элементов, используя клавишу "Tab".
Как это может выглядеть? Примерно так:
;
.; ;№ п/п ;Фамилия ;; ;1 ; Иванов ;
Как видите, ничего сложного в этом нет. Главное - не запутаться в количестве строк и ячеек. Иначе таблицу может перекосить.
Мы с вами разобрали создание таблицы в HTML, теперь можем переходить к параметрам как самой матрицы, так и ее строк и ячеек.
Параметры таблицы
Когда код написан, следует обратить внимание на следующие пункты: выравнивание в границ, фона, текста и прочее.
Параметры таблицы задаются в тэге
| № п/п | ;Фамилия | ;|
|---|---|---|
| 1 | ;| Иванов | ; |
Параметры строк
Итак, мы уже разобрались, как сделать таблицу в HTML и прописать основные ее параметры. Но что, если нам нужно выделить строку? Оформить ее не так, как основной текст таблицы?
Параметры строки прописываются в тэге
1. Уже известные вам border, bordercolor и bgcolor.
2. Align - выравнивание текста в строке. Может принимать значения left, center и right.
3. Valign - данный тэг выравнивает текст по вертикали. Принимает следующие значения:
- top - текст выравнивается по верхней границе;
- middle - по центру;
- bottom - по нижней границе.
Пример оформления строки:
; .№ п/п ;Фамилия ;
Параметры ячеек
И последнее, на что стоит обратить внимание тем, кто желает знать, как сделать таблицу в HTML - параметры отдельных ячеек, как обычных, так и заглавных. По сути, все делается точно так же, как и для таблицы или строки. Единственное, добавляется еще два немаловажных элемента:
1. Colspan - данный параметр указывает количество столбцов, на которые может простираться ячейка.
2. Rowspan - указывает уже количество строк, которое занимает данная ячейка.
Так как оформление ничем не отличается от прописывания строки, то не будем приводить пример кода.
Выводы
Сделать таблицу не так сложно, как может показаться на первый взгляд. Главное при написании ее кода - усидчивость и внимание.
Что касается того, как вставить таблицу в HTML, то ее шифр достаточно скопировать и вставить именно в то место вашей страницы, в котором она, по вашему мнению, должна располагаться.
Не бойтесь экспериментировать, и вскоре вы в совершенстве овладеете техникой создания таблиц. Успехов!
09.11.2015
Всем привет!
Продолжаем изучать основы HTML. В этом уроке я расскажу и на примерах покажу, как сделать таблицу в HTML
. А также рассмотрим, как можно задать цвет ячейкам таблицы, как отцентрировать таблицу, научимся делать границу таблицы, и т.д.
Таблицы HTML часто используют в HTML для перечислений некоторых сведений. Раньше еще таблицы использовали для создания каркаса веб-страниц:
…но это уже в прошлом, так как на сегодняшний день есть более эффективные способы создания каркасов для сайта с . Я частенько использую таблицу на своем блоге или на сайте, вот например, как в .
Я думаю, вы разобрались, для чего нужно учиться создавать таблицу.
Из каких основных тегов состоит таблица?
○ тег TABLE
Это главный контейнер для создания таблицы, внутри которого содержатся другие элементы таблицы, такие как столбики и ряды.
Закрывающий тег обязательный.
○ тег T R
Внутри контейнера ……
размещаются ряды:
Столбики создаются с помощью тега
Закрывающий тег обязателен.
Внимание: без использования всех этих тегов таблицу создать не возможно.
Теперь попробуем воспользоваться теорией и создадим таблицу на практике.
Задание: создать таблицу из одного ряда, где будет три столбика.
| ряд -1 /столбик 1 | столбик 2 | столбик 3 |
Задание: создать таблицу из трех рядов и трех столбиков.
| ряд -1 /столбик 1 | столбик 2 | столбик 3 |
| ряд -2 /столбик 1 | столбик 2 | столбик 3 |
| ряд -3 /столбик 1 | столбик 2 | столбик 3 |
До этого момента вам все ясно ? Кто не понял, поднимите руку! Ага, поняли все, значит идем далее.
Теперь рассмотрим атрибуты для таблицы.
*Атрибуты
○ Границы таблицы в HTML
Чтобы была видна таблица, к тегу
Если значение атрибута «
border
»
«0»
, границы видно не будет, если не прописать к тегу
Результат: ○ Как объединить ячейки в таблице
Чтобы объединить ячейки в таблице используют атрибуты «colspan»
и «rowspan»
к тегу <
td
>
. В значениях указываете, сколько нужно объединить ячеек.
Результат: Результат: Более сложный пример:
Результат: ○ Как увеличить расстояние между ячейками таблицы
Чтобы увеличить расстояние между текстом и границей ячейки, прописывают атрибут «cellpadding»
к тегу
В значениях у атрибута «cellpadding»
указываете расстояние отступа
Результат: Чтобы увеличить расстояние между ячейками в таблице, используют атрибут «cellspacing»
к тегу
В значениях у атрибута «cellspacing»
указываете расстояние между ячейками
Результат: ○ Как сделать фон таблицы HTML
Чтобы сделать фон таблицы HTML используют к тегу Результат: ○ Как вставить картинку в таблицу HTML
Чтобы вставить картинку в таблицу HTML, между тегом
Результат: Значения задаются в пикселях (px)
или в процентах (%)
○ Выравнивание содержимого в таблице HTML
Чтобы выровнять содержимое в таблице HTML, используют к тегу ALIGN
– горизонтальное выравнивание содержимого в таблице. VALIGN
– вертикальное выравнивание содержимого в таблице.
Результат: ○ Как выровнять таблице HTML по центру
Чтобы выровнять таблицу по центру, нужно обхватить таблицу тегом
Результат: Вот и закончили с таблицами. Вы теперь сможете самостоятельно создать таблицу любой сложности. Закрепите данный урок. Попробуйте самостоятельно создать любую таблицу. Предыдущая запись Таблицы в HTML настолько функциональны, что с помощью них можно верстать целые сайты (читайте ). Сейчас мы поговорим о вставке на веб-страницу несложных HTML-таблиц, разбирая только разметку, но не касаясь оформления, потому что украшать таблицы лучше с помощью CSS-стилей. Вот основные элементы, которые нужны для создания таблиц: Создайте документ формата HTML и скопируйте в него следующий код:
В браузере документ будет выглядеть так: Разберём, какие строчки кода за что отвечают. На прошлом уроке мы с Вами создали файл главной
страницы сайта index.html, открыли его блокнотом и добавили в
него HTML код, содержащий обязательные html теги. Кроме того, мы с Вами научились изменять цвет фона
страницы с помощью изменения значения параметра bgcolor тега BODY. Теперь давайте вспомним, какой мы выбрали макет или
каркас для сайта, об этом мы нашего курса. Обратите внимание, что макет сайта, на самом деле,
является таблицей
. Здесь следует отметить, что одним из самых
распространенных способов верстки html страниц, является использование
таблиц. На самом деле, существует два основных типа верстки
страниц html сайтов
– с помощью таблиц и с помощью CSS стилей. В настоящее время, верстка с помощью CSS стилей
является более предпочтительной, но при создании сайта в блокноте, проще
использовать табличную верстку, поэтому мы на таблице и остановимся. В начальный период развития Интернет, в основном
использовался табличный способ верстки страниц. Широкое использование таблиц при верстке
html
страниц
было связано с тем, что таблицу можно создать с любым количеством столбцов и
строк. Размеры таблицы очень просто меняются с помощью параметров. При верстке табличным способом, html страница разбивается на нужное
количество ячеек, каждая из которых занимает вполне определенное место на
странице. В результате, Вы можете добавлять блоки с контентом, в
нужные ячейки таблицы, тем самым, располагая контент в нужном месте .
Ну что же, продолжим нашу работу по . Откроем html справочник
и найдем там описание тега TABLE.
В самом начале описания тега, обратите внимание на замечание о том, что таблица
с невидимой границей широко используется для верстки веб-страниц, о чем мы
говорили выше. Итак, таблица в коде веб страницы задается тегом Откроем файл нашей веб страницы index.html для редактирования блокнотом Notepad++. И откроем ее с помощью браузера, для того, чтобы просматривать на странице изменения. В самом начале этой статьи, мы с вами говорили о том,
что макет сайта, который мы с Вами задумали, является таблицей. Причем, таблица макета сайта у нас будет состоять из
трех строк (Heder,
Контент и Footer) и
двух столбцов (Меню и Контент). Для добавления таблицы с тремя строками и двумя
столбцами, изменим наш код, добавив следующее:
Чтобы в таблице задать рамку, используем параметр border.
Толщина рамки таблицы задается в пикселах (px). Добавим в наш html код параметр border, со значением аргумента, равным 1px. То есть, толщина рамки таблицы у нас будет равна одному пикселу:
Чтобы выровнять таблицу по центру окна браузера, используем
параметр align,
который может принимать три значения: left, center, right, понятно, что для выравнивания
таблицы по центру окна браузера, значение аргумента параметра выравнивания, у нас должно быть равно: center. И давайте, здесь же, зададим ширину таблицы. Ширина
таблицы задается параметром width. Значения, которые может принимать данный
параметр, могут быть выражены целым числом в пикселах или в процентах от
текущей ширины окна браузера. Добавим в наш код выравнивание и ширину таблицы, в
результате, получим следующий код:
Обновляем окно браузера страницы нашего сайта, чтобы
посмотреть изменения, мы видим, что таблица выровнялась по центру окна и
изменила свою ширину. Теперь давайте вернемся к рамке таблицы, мы в html коде
мы задали ее равной 1 пикселу с помощью значения аргумента параметра border: border=”1”. Вновь обратиться к параметрам тега TABLE в html справочнике,
здесь есть два параметра, которые влияют на внешний вид рамки. Первый параметр: cellspacing – задает расстояние между
ячейками таблицы. Второй параметр: cellpadding – от значения аргумента
данного параметра, зависит расстояние от рамки до содержимого ячейки. Чтобы сделать все расстояния и отступы минимальными,
зададим значения аргументов выше приведенных параметров равными нулю. В результате html код таблицы, примет
следующий вид:
Как Вы помните, наша таблица должна иметь три строки,
причем в первой строке должна быть одна ячейка, во второй строке две ячейки и в
третьей строке, должна быть тоже одна ячейка. Если мы посмотрим на внешний вид таблицы, то увидим,
что для приведения таблицы к нужному виду, нам достаточно объединить
горизонтальные ячейки первой и третьей строки. Для того, чтобы это сделать, воспользуемся параметром colspan.
Данный параметр используется в теге TD. Значение аргумента параметра colspan, указывает на
количество объединяемых горизонтальных ячеек, в нашем случае это значение равно
2. Кроме добавления параметра colspan, давайте изменим
надписи в ячейках таблицы, в соответствии с нашим макетом. После всех изменений, полный html код
нашей страницы будет следующим:
Сохраним наш код в блокноте и обновим файл index.html в
браузере, чтобы посмотреть на изменения. Итак, Данный урок получился достаточно большим, поэтому
работу над htmlтаблицей
нашей страницы, давайте продолжим в следующем уроке.
Благодаря универсальности таблиц, большому числу параметров, управляющих их видом, таблицы надолго стали определенным стандартом для верстки веб-страниц. Таблица с невидимой границей представляет собой словно модульную сетку, в блоках которой удобно размещать элементы веб-страницы. Тем не менее, это не совсем правильный подход, ведь каждый объект HTML определен для своих собственных целей и если он используется не по назначению, причем повсеместно, это значит, что альтернатив нет. Так оно и было долгое время, пока на смену таблицам при верстке сайтов не пришли слои. Это не значит, что слои теперь используются сплошь и рядом, но тенденция уже наметилась четко — таблицы применяются для размещения табличных данных, а слои — для верстки и оформления. Таблица состоит из строк и столбцов ячеек, которые могут содержать текст и рисунки. Обычно таблицы используются для упорядочения и представления данных, однако возможности таблиц этим не ограничиваются. C помощью таблиц удобно верстать макеты страниц, расположив нужным образом фрагменты текста и изображений. Для добавления таблицы на веб-страницу используется тег Пример 12.1. Создание таблицы
Порядок расположения ячеек и их вид показан на рис. 12.1.
применяется атрибут «
border
»
.
атрибут «border»
, граница в таблице тоже видна не будет.
ряд -1 /столбик 1
столбик 2
столбик 3
ряд 1 столбик 1
ряд 2 столбик 1
ряд 2 столбик 2
ряд 1 столбик 1
ряд 1 столбик 2
ряд 2 столбик 1
ряд -1 /столбик 1
столбик 2
столбик 3
ряд -2 /столбик 1
столбик 2
столбик 3
столбик 4
ряд 1 столбик 1
столбик 2
ряд 1 столбик 1
столбик 2
и
такие атрибуты:
ряд -1 /столбик 1
столбик 2
столбик 3
ряд -2 /столбик 1
столбик 2
столбик 3
столбик 4
вставляться тег
.
ряд 1 ячейка 1
ячейка 2
атрибут «align»
и «valign»
:
Значения:
Значения:текст
ячейка по умолчанию
содержимое выравниваем горизонтально по правому краю, вертикально - прижимаем к низу
содержимое выравниваем горизонтально по левому краю, вертикально - прижимаем к верху
содержимое выравниваем горизонтально по центру, вертикально - прижимаем посредине
ряд -1 /столбик 1
столбик 2
столбик 3
Дополнительные и основные теги к таблице
Название 1
Название 2
1
2
Жду вас в следующем уроке. Подписывайтесь на обновления моего блога.
Следующая запись Теги и атрибуты таблиц
- контейнер, внутри которого располагается таблица (такой же, как
для маркированных или
для нумерованных списков).
, вне ячеек и строк.
- парный тег, содержащий строку таблицы (ячейки, расположенные на одном уровне по горизонтали).
- тег, создающий ячейку заголовка таблицы. Внешне её содержимое отличается от контента в других ячейках - обычно текст внутри
обозреватель выделяет жирным и размещает по центру.
- контейнер, с помощью которого создаётся простая ячейка. Сколько таких тегов будет содержать строка (тег
, столько ячеек в ней и будет: один тег - одна ячейка.
.
Пример создания таблицы
Назначение Инструмент
Разметка HTML XHTML
Оформление CSS
Разработка PHP Python
- открыли таблицу, задав ей толщину рамок.
- закрыли таблицу.
- открыли строку.
- закрыли строку. Аналогично создали остальные строки.
Назначение
- создали ячейку с оформлением заголовка.
Инструмент
- создали вторую заголовочную ячейку в строке. Параметром colspan указали, что эта ячейка должна занимать по горизонтали две.
- добавили вторую строку таблицы уже с обычными, а не заголовочными, ячейками. Аналогично вставили последующие строки и ячейки.
Разметка
HTML
XHTML , мы знаем, что таблица состоит из
вертикальных столбцов и горизонтальных строк, которые образуют ячейки таблицы. Строки в 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 столбец
2строка 1 столбец
2строка 2 столбец
3строка 1 столбец
3строка 2 столбец
1строка 1 столбец
1строка 2 столбец
2строка 1 столбец
2строка 2 столбец
3строка 1 столбец
3строка 2 столбец
Header
Меню сайта
Контент
Footer
Создание таблицы
. Этот элемент служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются соответственно с помощью тегов
и
. Таблица должна содержать хотя бы одну ячейку (пример 12.1). Допускается вместо тега
использовать тег
. Текст в ячейке, оформленной с помощью тега
, отображается браузером шрифтом жирного начертания и выравнивается по центру ячейки. В остальном, разницы между ячейками, созданными через теги
и
нет.
Ячейка 1
Ячейка 2
Ячейка 3
Ячейка 4