Учимся создавать несложные таблицы

Кладовая теории, в которой собран опыт многих администраторов которые добились успехов в продвижении форумов.
Оптимизация phpbb3 | В каких цветах оформить форум? | Бесплатная раскрутка форума | Поисковая оптимизация (SEO)
Аватара пользователя
CabinetAdmin

Учимся создавать несложные таблицы

CabinetAdmin 30 авг 2012, 19:24 Сообщение

Создаём таблицу. Или как разобраться в правильности составления многоуровневой табличной вёрстки.

Итак, начнём издалека и сравним нашу таблицу с домом. Что есть у каждого дома? Конечно же фундамент, этажи, квартиры, крыша... Вот на этом примере мы и попробуем построить наш "дом".

<table> - контейнер таблицы, все "постройки" должны быть заключены в этот элемент.
<tr> - контейнер для создания строки таблицы, в нашем случае "этаж".
<th> - заголовочная ячейка таблицы, у нас "крыша".
<td> - одна ячейка таблицы, у нас это будет "квартира".

Приступим к "строительству".

Строим самый простой одноэтажный двухквартирный дом:

Код: Выделить всё

<table> <tr> <td>Квартира 1</td> <td>Квартира 2</td> </tr> </table>


Получаем:
Квартира 1Квартира 2


Что за дом у которого нет крыши? Правильно, давайте её поставим:

Код: Выделить всё

<table> <tr> <th>Крыша</th> </tr> <tr> <td>Квартира 1</td> <td>Квартира 2</td> </tr> </table>


Незабываем самое главное, что "крыша" это тоже "этаж" и должен быть обрамлён соответствующим элементом - <tr>

Крыша
Квартира 1Квартира 2


Что мы получили? Одноэтажный двухквартирный дом со съехавшей влево крышей, давайте поставим её на середину. Для этого нам нужен атрибут colspan. В нашем случае он нам говорит сколько именно в нашем доме квартир на этаже.

Код: Выделить всё

<table> <tr> <th colspan="2">Крыша</th> </tr> <tr> <td>Квартира 1</td> <td>Квартира 2</td> </tr> </table>


Получаем:
Крыша
Квартира 1Квартира 2


Тут всё предельно понятно и строить ещё большие одноэтажные дома не вижу смысла. Просто добавляем "квартиры" и если у вашего "дома" есть "крыша", то растягиваем её во весь этаж атрибутом colspan.




Строим многоэтажный многоквартирный дом, с разным количеством квартир на этаже.

Итак в следующем примере у нас будет:
1 этаж - две квартиры, одна из которых больше
2 этаж - три квартиры
3 этаж - одна квартира во весь этаж, пентхауз:)

Код: Выделить всё

<table> <tr> <th colspan="3">Крыша</th> </tr> <tr> <td colspan="3">Этаж 3. Квартира 1</td> </tr> <tr> <td>Этаж 2. Квартира 1</td> <td>Этаж 2. Квартира 2</td> <td>Этаж 2. Квартира 3</td> </tr> <tr> <td>Этаж 1. Квартира 1</td> <td colspan="2">Этаж 1. Квартира 2</td> </tr> </table>


Крыша
Этаж 3. Квартира 1
Этаж 2. Квартира 1Этаж 2. Квартира 2Этаж 2. Квартира 3
Этаж 1. Квартира 1Этаж 1. Квартира 2


Чтобы получить одну "квартиру" на весь, или на большую половину "этажа", применяем всё тот же атрибут colspan

Ничего сложного правда? Главное помнить несколько правил:
1. Все элементы должны иметь как открывающие, так и закрывающие теги <table> ... </table>
2. Все ячейки (группы ячеек) должны быть заключены в контейнер <tr> ... </tr>


Для придания нашей таблице красоты: фон в ячейках, толщина и цвет рамки таблицы, отступы от краёв и расположение текста в ячейках, воспользуйтесь атрибутами для каждого элемента. О всех артибутах подробнее...
Либо через CSS, прописывая для отдельных элементов таблицы свой класс, например:

Код: Выделить всё

<td class="sample"> ... </td>


Код: Выделить всё

.sample { color: black; border: 1px solid #828282; }
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

GoDFaTHeR

Re: Учимся создавать несложные таблицы

GoDFaTHeR 30 авг 2012, 20:31 Сообщение

Скрытый текст. Вы не состоите в группах, которым доступен этот текст.


пентхаус, это все таки два этажа одной квартиры, я бы добавил еще пример с такими квартирами
На этом сервисе можно cоздать форум бесплатно
Домены для форума ТУТ

GoDFaTHeR

Re: Учимся создавать несложные таблицы

GoDFaTHeR 30 авг 2012, 20:53 Сообщение

CabinetAdmin писал(а):<table> - контейнер таблицы, все "постройки" должны быть заключены в этот элемент.
<tr> - контейнер для создания строки таблицы, в нашем случае "этаж".
<th> - заголовочная ячейка таблицы, у нас "крыша".
<td> - одна ячейка таблицы, у нас это будет "квартира".


Дома в интернете строятся с самого верхнего этажа!!!

Дополнительно для понимания необходимости открывающих и закрывающих тэгов

для примера берем
одноэтажный дом с крышей и рассмотрим его более подробно

<table> Мы сообщаем браузеру что мы начали строительство дома
<tr> Мы сообщаем браузеру что мы строим этаж (в данном случае крыша это тоже этаж ну или чердак)
<th colspan="2"> мы сообщаем браузеру что мы начали строить крышу
Крыша</th> Этим тэгом мы сообщаем что крыша закончили строить крышу
</tr> и этаж на этом этапе мы тоже закончили строить
<tr>Новый этаж и на новом этаже
<td> стенка квартиры
Квартира 1</td> вторая стенка квартиры (если на листочке рисовать дом, то становится все очень понятно)
<td>Стена второй квартиры
</td> и опять же вторая стена квартиры
</tr> Закончили строить жтаж
</table> закончили строить дом


возьмите листочек бумаги и нарисуйте этот дом.

а теперь нарисуйте такой дом :) что у вас получилось?

<table>
<tr>
<th colspan="2">Крыша</th>
</tr>
<tr>
Квартира 1</td>
<td>Квартира 2
</tr>
</table>
Изображение

Вам не дует без стен?
На этом сервисе можно cоздать форум бесплатно
Домены для форума ТУТ

Аватара пользователя
CabinetAdmin

Re: Учимся создавать несложные таблицы

CabinetAdmin 31 авг 2012, 14:14 Сообщение

Скрытый текст. Вы не состоите в группах, которым доступен этот текст.
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Аватара пользователя
romaamor

Re: Учимся создавать несложные таблицы

romaamor 09 янв 2014, 02:52 Сообщение

А как будет выглядить дом (код) без крыши, два итажа, на втором три квартиры, а на первом одна на всю шерину дома ?

Аватара пользователя
CabinetAdmin

Re: Учимся создавать несложные таблицы

CabinetAdmin 09 янв 2014, 14:32 Сообщение

Код: Выделить всё

<table> <tr> <td>Этаж 2. Квартира 1</td> <td>Этаж 2. Квартира 2</td> <td>Этаж 2. Квартира 3</td> </tr> <tr> <td colspan="3">Этаж 1. Квартира 1</td> </tr> </table>
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Аватара пользователя
romaamor

Re: Учимся создавать несложные таблицы

romaamor 09 янв 2014, 14:42 Сообщение

Пробовал я так. Картинки в незу уходят в лево. А надо что бы по центру были.

Аватара пользователя
CabinetAdmin

Re: Учимся создавать несложные таблицы

CabinetAdmin 09 янв 2014, 14:52 Сообщение

Какие картинки? Какой центр?... Вроде про таблицу речь была?...

Код: Выделить всё

<td colspan="3" align="center">
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Аватара пользователя
romaamor

Re: Учимся создавать несложные таблицы

romaamor 09 янв 2014, 15:54 Сообщение

CabinetAdmin » Сегодня, 15:52 писал(а):Какие картинки? Какой центр?... Вроде про таблицу речь была?...

Сделал по другому. Можеш посмотреть у меня на сайте. Логотипы телеканалов.

GoDFaTHeR

Re: Учимся создавать несложные таблицы

GoDFaTHeR 09 янв 2014, 16:49 Сообщение

romaamor » Сегодня, 06:42 писал(а):Картинки в незу уходят в лево.

так это уже дополнительная обстановка.. как говорится дизайн :)
стены мы построили... а вот в комнатах надо порядо

комнаты это <td>комната</td>
в комнате хотим повесить картинку
<td><img src="adreskartinki"></td>

но какртинка уползает влево (ну так задумано по умолчанию)

тогда мы делаем устанавливаем картинку в центре

<td><center><img src="adreskartinki"></center></td>

Так же после всех манипуляций с комнатами, можно комнатам задать размеры высоты потолков и ширины комнат

<td width="10" height="5">soderzhimoe komnaty</td> ширина 10 высота 5
На этом сервисе можно cоздать форум бесплатно
Домены для форума ТУТ




Похожие темы

Вернуться в «Статьи / советы / инструкции.»

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и 2 гостя