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

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

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

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

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

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


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

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

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

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

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

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

Вставка в таблицу картинки.

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

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

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

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

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

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

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

colspan

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

атрибут COLSPAN

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

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

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

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

атрибут ROWSPAN

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

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

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

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

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

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

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

С уважением, Василенко Александр

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

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

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

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

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