Как сделать таблицу в html. Структура таблицы.

Категория: HTML. 1 комментарий. 27.08.2012.

Здравствуйте. Сегодня мы рассмотрим, как сделать таблицу на языке html, и далее вы можете более качественно структурировать контент на страницах. Вы можете представить информацию в более понятном для читателя виде. Раньше с помощью html-таблиц создавался и дизайн сайта — табличный дизайн но сейчас все эти функции выполняет CSS, и теперь таблицы используют только для оформления текста.

Как сделать таблицу в html.

Создание таблицы в html.

А теперь мы выполним непосредственно создание таблицы в html и выполнять мы будем все в четыре этапа. На первом этапе мы создадим каркас таблицы и зарегистрируем для нее блок при помощи парных тегов <table></table>.


На следующем этапе нам нужно создать строки нашей таблицы при помощи также парного тега <TR></TR> каждый раз добавляя данный тег мы будем увеличивать количество строк таблицы.

На третьем этапе нам нужно создать ячейки и для этого мы будем использовать два тега <TH></TH> и <TD></TD> при помощи первого мы создадим заголовочную ячейку а вторым мы будем задавать простые ячейки списков.

И на четвертом заключительном этапе нам нужно будет просто заполнить все ячейки нужной нам информацией. Давайте теперь мы создадим тестовую таблицу html, с помощью которой я вам покажу как все это выглядит на практике и для этого нужно зайти в любой редактор кода и добавить туда следующий код:

Как сделать таблицу в html.

И в результате мы получим вот такой результат.

Как мы видим заголовочные ячейки выделены жирным шрифтом и тем самым мы можем выделить заголовки нашей таблицы и указать на важность заголовков.

Вставка картинки в ячейку.

В ячейки мы можем вставлять не только текст но и картинки и для этого нам нужно просто вставить в ячейку таблицы следующий код:

<IMG SRC="picture.jpg" ALT="Картинка в ячейке таблицы">

Где как вы уже поняли нужно указать путь к файлу а также нужно прописать альтернативный текст к картинке.

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

Объединение ячеек при помощи атрибутов COLSPAN и ROWSPAN.

Очень часто при создании таблиц нужно объединять несколько ячеек вместе и в современном дизайне это не проблема. Теперь давайте мы разберемся с помощью каких атрибутов мы можем выполнить данные действия.

Для того чтобы мы могли объединить ячейки нам нужно выполнить следующие действия:
Первое это определить какие ячейки мы будем объединять и найти самую первую из них. После этого вам нужно к первой ячейке прописать атрибут COLSPAN и в него вписать количество ячеек для объединения и вот как это должно выглядеть на практике:

colspan

После того как вы прописали данный атрибут COLSPAN вам остается только удалить не нужные ячейки которые мы объединили и теперь они просто сдвинулись в сторону.

атрибут COLSPAN

И теперь наши ячейки объединены и мы можем перейти к другой части в которой мы объединим ячейки по вертикали.

Для того чтобы можно было это выполнить нам нужен атрибут ROWSPAN и выполнить такие действия и первое это находим строку что отвечает первой из объединяемых ячеек ну и конечно же нужно считать строки в таблице сверху вниз.

После этого нам нужно найти теги которые отвечают за первую ячейку которую мы хотим объединить, и после этого нам нужно вписать в него атрибут ROWSPAN с количеством ячеек которые нужно объединить с учетом первой, в которую мы прописывали данный атрибут.

И последнее, что мы должны сделать - это поудалять теги <TD> (<TH>),  которые создавали все те ячейки которые мы теперь объединили в одну. Вот как это выглядит на практике:

атрибут ROWSPAN

После того как мы выполним эти действия мы получим следующую таблицу.

Теперь мы умеем выполнять объединение ячеек как по горизонтали так и по вертикали при помощи двух атрибутов COLSPAN и ROWSPAN и теперь мы перейдем к следующему разделу в котором мы сможем добавить заголовок к html-таблице.

Добавление заголовка.

Для каждой таблицы мы можем добавить заголовок, и этот заголовок будет размещен в самом верху таблицы и для нее не будет создано ячейки что экономит html-код. Для этого нам нужно применить в любом месте таблицы тег <CAPTION>Заголовок таблицы.</CAPTION> и после этого к ней добавится еще и заголовок.

Добавление заголовка к таблице.

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

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

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

1 в ответ на “Как создать таблицу на языке html”:

  1. теплица
    http://polikar.com.ua
    пишет:

    Спасибо, как раз та инфа которую искал.

Оставить комментарий