Создаём таблицу. Или как разобраться в правильности составления многоуровневой табличной вёрстки.
Итак, начнём издалека и сравним нашу таблицу с домом. Что есть у каждого дома? Конечно же фундамент, этажи, квартиры, крыша... Вот на этом примере мы и попробуем построить наш "дом".
<table> - контейнер таблицы, все "постройки" должны быть заключены в этот элемент.
<tr> - контейнер для создания строки таблицы, в нашем случае "этаж".
<th> - заголовочная ячейка таблицы, у нас "крыша".
<td> - одна ячейка таблицы, у нас это будет "квартира".
Приступим к "строительству".
Строим самый простой одноэтажный двухквартирный дом:
Получаем:
Что за дом у которого нет крыши? Правильно, давайте её поставим:
Незабываем самое главное, что "крыша" это тоже "этаж" и должен быть обрамлён соответствующим элементом - <tr>
Что мы получили? Одноэтажный двухквартирный дом со съехавшей влево крышей, давайте поставим её на середину. Для этого нам нужен атрибут colspan. В нашем случае он нам говорит сколько именно в нашем доме квартир на этаже.
Получаем:
Тут всё предельно понятно и строить ещё большие одноэтажные дома не вижу смысла. Просто добавляем "квартиры" и если у вашего "дома" есть "крыша", то растягиваем её во весь этаж атрибутом colspan.
Строим многоэтажный многоквартирный дом, с разным количеством квартир на этаже.
Итак в следующем примере у нас будет:
1 этаж - две квартиры, одна из которых больше
2 этаж - три квартиры
3 этаж - одна квартира во весь этаж, пентхауз:)
Чтобы получить одну "квартиру" на весь, или на большую половину "этажа", применяем всё тот же атрибут colspan
Ничего сложного правда? Главное помнить несколько правил:
1. Все элементы должны иметь как открывающие, так и закрывающие теги <table> ... </table>
2. Все ячейки (группы ячеек) должны быть заключены в контейнер <tr> ... </tr>
Для придания нашей таблице красоты: фон в ячейках, толщина и цвет рамки таблицы, отступы от краёв и расположение текста в ячейках, воспользуйтесь атрибутами для каждого элемента. О всех артибутах подробнее...
Либо через CSS, прописывая для отдельных элементов таблицы свой класс, например:
Итак, начнём издалека и сравним нашу таблицу с домом. Что есть у каждого дома? Конечно же фундамент, этажи, квартиры, крыша... Вот на этом примере мы и попробуем построить наш "дом".
<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>
Квартира 1 | Квартира 2 |
Код: Выделить всё
<table>
<tr>
<th colspan="2">Крыша</th>
</tr>
<tr>
<td>Квартира 1</td>
<td>Квартира 2</td>
</tr>
</table>
Крыша | |
---|---|
Квартира 1 | Квартира 2 |
Строим многоэтажный многоквартирный дом, с разным количеством квартир на этаже.
Итак в следующем примере у нас будет:
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 |
Ничего сложного правда? Главное помнить несколько правил:
1. Все элементы должны иметь как открывающие, так и закрывающие теги <table> ... </table>
2. Все ячейки (группы ячеек) должны быть заключены в контейнер <tr> ... </tr>
Для придания нашей таблице красоты: фон в ячейках, толщина и цвет рамки таблицы, отступы от краёв и расположение текста в ячейках, воспользуйтесь атрибутами для каждого элемента. О всех артибутах подробнее...
Либо через CSS, прописывая для отдельных элементов таблицы свой класс, например:
Код: Выделить всё
<td class="sample"> ... </td>
Код: Выделить всё
.sample {
color: black;
border: 1px solid #828282;
}
Комментарии: 10
[ghide]по моему это моя статья была где то про дом и стены с квартирами
только было не так красиво написано
текст видят только админы[/ghide]
пентхаус, это все таки два этажа одной квартиры, я бы добавил еще пример с такими квартирами
только было не так красиво написано
текст видят только админы[/ghide]
пентхаус, это все таки два этажа одной квартиры, я бы добавил еще пример с такими квартирами
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>
Вам не дует без стен?
[ghide]
Про квартиры пришло в голову после этого - Как сделать такую таблицу?. Когда человек ну никак не может понять принцип составления кода.[/ghide]
Не видел:) Видимо мои мозги работают в ту же сторону:)GoDFaTHeR писал(а):по моему это моя статья была где то про дом и стены с квартирами
только было не так красиво написано
текст видят только админы
Про квартиры пришло в голову после этого - Как сделать такую таблицу?. Когда человек ну никак не может понять принцип составления кода.[/ghide]
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!
Код: Выделить всё
<table>
<tr>
<td>Этаж 2. Квартира 1</td>
<td>Этаж 2. Квартира 2</td>
<td>Этаж 2. Квартира 3</td>
</tr>
<tr>
<td colspan="3">Этаж 1. Квартира 1</td>
</tr>
</table>
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!
Какие картинки? Какой центр?... Вроде про таблицу речь была?...
Код: Выделить всё
<td colspan="3" align="center">
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!
Сделал по другому. Можеш посмотреть у меня на сайте. Логотипы телеканалов.CabinetAdmin » Сегодня, 15:52 писал(а):Какие картинки? Какой центр?... Вроде про таблицу речь была?...
так это уже дополнительная обстановка.. как говорится дизайн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