Таблицы html

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

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

Первое о чём хотелось бы сказать, это как сделать заголовочною строку, в которой весь текст становиться автоматический жирным и к тому же выравнивается по середине, а то я в прошлом видеоуроке по созданию таблиц забыл вам об этом сказать. Для этого нужно просто заместо верхних тегов столбцов <td>, прописать тег<th>:

<tr><th>Дата</th><th>Время</th><th>Продукт</th><th>Место</th></tr>

С этими тегами <th>, верхняя строка таблицы сразу будет выделяться от других и будет видно что она заголовочная:

Следующее чему мы научимся, так это менять ширину таблицы, сейчас она у нас минимально той ширины, которой хватает для того чтобы в ней уместился текст, но мы можем придавать таблицам фиксированную ширину. Опять же в этом атрибуте нет ничего нового, мы уже знакомы с ним из урока по вставке картинок, атрибут этот называется width, задаётся он в верхнем главном теге таблицы: <table>:

<table border="1" width="700"> - Мы сделали таблицу шириной в 700 пикселей.

Едем дальше, если вы приглядитесь к нашей таблице, то увидите что во всех ячейках, кроме тегов <th>, все данные прижаты к левому краю, но мы можем выровнять всё в этих ячейках так как нам захочется, воспользовавшись знакомым нам атрибутом align. Возникает другой вопрос, где его надо обозначить?, а прописать мы его можем либо отдельному тегу <td>, тогда текст выровняется только в этой ячейке, либо можно задать этот атрибут сразу всей строке в теге <tr>, тогда текст выровняется во всех ячейках этой строки.

<tr align="center"><td>12.11.2012</td><td>15.00</td><td>молоко</td><td>Москва</td></tr>

Хорошо, с этим разобрались, но как выровнять по центру саму таблицу на сайте, а оказывается проще простого, надо просто этот же атрибут задать тегу <table>:

<table border="1" width="700" align="center">

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

<table border="1" width="700" align="center" cellpadding="10">

Мы увеличили внутренний отступ в каждой ячейке на 10 пикселей, смотреться будет это так:

Но мы можем увеличивать расстояние не только внутри ячеек, но и между ними, тут нам пригодиться уже атрибут cellspacing:

<table border="1" width="700" align="center" cellpadding="10" cellspacing="5">

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

И кстати, если хотите чтоб текст в ячейке начинался с самого верха, то используйте атрибут: valign=»top»

Вот и всё что я планировал изучить с вами в этом уроке, конечно с таблицами в html можно творить и более экстремальные вещи, можно менять стиль рамок, ставить фоном таблице любую картинку и многое другое, но это мы будем осуществлять уже с помощью CSS, А то что можно делать с рамками в самом html, мы уже изучили.