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

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

<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>
[th]Крыша[/th]
Квартира 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;
}
Комментарии: 10

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

[ghide]по моему это моя статья была где то про дом и стены с квартирами :)
только было не так красиво написано
текст видят только админы[/ghide]

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

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>
Изображение

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

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

[ghide]
GoDFaTHeR писал(а):по моему это моя статья была где то про дом и стены с квартирами
только было не так красиво написано
текст видят только админы
Не видел:) Видимо мои мозги работают в ту же сторону:)

Про квартиры пришло в голову после этого - Как сделать такую таблицу?. Когда человек ну никак не может понять принцип составления кода.[/ghide]
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

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

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

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>
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

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

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

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

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

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

<td colspan="3" align="center">
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

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

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

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
  • 0
На этом сервисе можно cоздать форум бесплатно
Домены для форума ТУТ

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

Теперь понятненько. :drink:
  • 0