Таблица на сайт с помощью Html

Доброго времени суток мои дорогие читатели блога Сам себе Seoшник. Сегодня тема моей новой статьи будет Html верстка сайта. Конечно таблицы и табличная верстка отошла на второй план с появлением CSS, но все равно веб мастера всех уровней и классов время от времени используют в своих блоках Html коды.

До появление CSS никто не мог обойтись без таблиц, так как на них базировалась вся верстка сайтов. Веб мастера использовали не только простые теги типа Tr, Td и Th, Table, но и широкомасштабные вспомогательные элементы позволяющие улучшить структуру и юзабилити таблицы. Даже сейчас покапавшись в рунете я обнаружил такие сайты и форумы, на мой взгляд они выглядят довольно симпатично, нежели их конкуренты из CSS.

Таблицы  Html

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

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

Формирование Html таблицы

В Html таблицы формируются следующим способом. Вся таблица "оформляется" открывающимися и закрывающимися тегами table, а внутри уже будут размещены элементы tr, все вместе это выглядить примерно так:

<table>
<tr></tr>
<tr></tr>
...
<tr></tr>
</table>

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

Именно внутри этих ячеек можно будет увидеть находящийся там контент.

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

Что бы узнать новости первыми, подпишитесь на обновление!

автор: Ловцов Алексей