html таблицы 22.04.2013

Здравствуйте! Сегодня у нас довольно таки интересная и на мой взгляд сложноватая тема. Во всяком случаи я постоянно вспоминал ее заново, когда у меня не было постоянной практики в создании сайтов. Теперь же я готов рассказать ее вам, как на духу ))

Тем более я эту тему уже освещал в своем бесплатном курсе по html, но повториться будет не лишним. Итак, тема нашего сегодняшнего поста — html таблицы.

Первое с чем стоит познакомиться это сама структура html таблицы. Сразу же впишем в ячейки какой нибудь текст, чтоб было нагляднее и понятнее и добавим вот такой атрибут border="1" тегу <table></table>, позже объясню зачем. Выглядит это дело следующим образом:

<table border="1">

<tr><th>Заголовок</th><th>Заголовок</th><th>Заголовок</th></tr>

<tr><td>Текст</td><td>Текст</td><td>Текст</td></tr>

<tr><td>Текст</td><td>Текст</td><td>Текст</td></tr>

</table>

Ну и вот, собственно что из этого выходит:

Давайте разбирать как так у нас получилось.

Ну во-первых. Для того чтобы создать таблицу, мы использовали 4 тега. Это <table></table> — этот тег оборачивает всю таблицу и является неотъемлемой его частью.

Далее идет тег <rt></tr> — этот тег создает строки в нашей таблице. Сколько строк захотели, столько сделали. Я сделал 3 строки.

Еще один тег который мы использовали, хотя его можно было и не включать, зависит от ситуации. Тег <th></th> — тег заголовка. Именно он выделяет текст который в нем заключен в жирный цвет.

ну и последний тег который является обязательным — это тег <td></td> — собственно тег самой ячейки. Сколько ячеек задали, столько и будет. У меня в каждой строке по 3 ячейки.

Да, атрибут  border="1" который мы включили для тега <table></table> указывает браузеру на то, что надо отображать нашу таблицу рамкой, толщиной в 1px. Если бы мы не задали этого значения, то границ нашей таблицы мы бы не увидели.

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

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

<table border="1">

<tr><th colspan="3">ЗАГОЛОВОК</th></tr>

<tr><td rowspan="2">Текст</td><td>Текст</td><td>Текст</td></tr>

<tr>                                                               <td>Текст</td><td>Текст</td></tr>

</table>

Вот что получаем в итоге:

И так, что мы сделали с нашей таблицей. Мы сделали для нее общий заголовок. Мы просто удалили 2 ячейки <th>Заголовок</th>, и оставили одну ячейку - <th colspan="3">ЗАГОЛОВОК</th> Как видите, добавили в тег, атрибут colspan="3" и указали в кавычках цифру 3 которая говорит браузеру о том что данная ячейка объединяет 3 ячейки по горизонтали. Это мы и получили на выходе.

Так же мы объединили 2 ячейки по вертикале. Сделано это было с помощью атрибута rowspan="2" одну ячейку мы удалили, т.к. она была лишней и вместо 2 ячеек появилась одна которая выглядит вот так - <td rowspan="2">Текст</td> Постарался это изобразить наглядно в примере второго html кода.

Думаю с этим все стало понятно. Это все, что следует знать о html таблицах. Все остальное достигается свойствами css. Например, выравнивание и отступы текста. Задание цвета, как строкам, так и отдельным ячейкам таблицы. И много другое.

На сегодня у меня про таблицы все. Спасибо за внимание.

До встречи на Sayt-Stroy.com

Метки: ,

Оставь свой первый комментарий и получи книгу в подарок!

Данная книга расскажет о всех секретах правильного и полноценного продвижения интернет проектов.

Именно с нее следует начать изучение SEO.

WordPress

Добавить комментарий

ВКонтакте