Что делать, если нет возможности воспользоваться специальными приспособлениями для создания данного элемента? Ответ прост, как все гениальное - берем простой текстовый редактор и ваш собсвенный браузер.
И так, начнем, пожалуй.
Откройте свой блокнот и запишите, для начала, следующие строчки:
<table> </table>
Эти теги говорят, где ваша таблица будет начинаться и заканчиваться. Ставить их всегда обязательно.
Далее расставляем строки, вашей таблицы. К примеру на первой картинке я их насчитал 7 штук*. Значит столько и ставим:
<table>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>Каждый открывающий тег <tr> должен быть закрыт таким же но со слешем перед ним
Теперь начнем расстановку ячеек:
В первой строке у нас 3 ячейки, значит так и пишем в теги первой строки теги каждой ячейки:
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>тут представлен только кусок кода именно этой строки, но все они будут похожими
Дальше заполняем тем, что вам нужно, ваши ячейки. Это будут стандартные надписи, присутствующие почти на каждом форуме - модеры, админы и бегущая строка.
Заполнили. Теперь начинается самое интересное. Вы думаете "откуда он насчитал столько строк?" а видно это на втором рисунке.
Строчки тут выделены красной линией и прекрасно видно как они идут.
Так как же нам сделать так, что бы первая ячейка занимала 2 строки? А для этого есть параметры rowspan, если нужно обьединить строки и colspan, если нужно обьединить колонки.
Ставим в открывающий тег первой и третьей ячейки параметр rowspan, равный двум:
<td rowspan=2>
Теперь переходим ко второй строке.
Тут у нас будет картинка, занимающая 5 строк. Значит так и пишем в теги второй строки:
<td rowspan=5>
<img src='ССЫЛКА_НА_КАРТИНКУ'>
</td>И так проходим по всем ячейкам, приглядываясь как можно их скомбинировать. Полностью код будет таким:
<table>
<tr>
<td rowspan=2>
Модеры
</td>
<td>
<marquee>бегущая строка</marquee>
</td>
<td rowspan=2>
Админы
</td>
</tr>
<tr>
<td rowspan=5>
<img src='ССЫЛКА_НА_КАРТИНКУ'>
</td>
</tr>
<tr>
<td rowspan=2>
текст1
</td>
<td>
текст2
</td>
</tr>
<tr>
<td rowspan=2>
текст3
</td>
</tr>
<tr>
<td rowspan=2>
текст4
</td>
</tr>
<tr>
<td>
текст5
</td>
</tr>
<tr>
<td colspan=3>
низ
</td>
</tr>
</table>Но такую табличку плохо будет видно в вашем браузере, а по этому добавим для наглядности параметры высоты для ячеек, ширину для таблицы, толщину рамки и фон таблицы и получим следующее:
<table border="1" bgcolor="silver" width="100%">
<tr>
<td rowspan=2 height="100px">
Модеры
</td>
<td>
<marquee>бегущая строка</marquee>
</td>
<td rowspan=2 height="100px">
Админы
</td>
</tr>
<tr>
<td rowspan=5 height="500px">
<img src='ССЫЛКА_НА_КАРТИНКУ'>
</td>
</tr>
<tr>
<td rowspan=2 height="200px">
текст1
</td>
<td height="100px">
текст2
</td>
</tr>
<tr>
<td rowspan=2 height="300px">
текст3
</td>
</tr>
<tr>
<td rowspan=2 height="100px">
текст4
</td>
</tr>
<tr>
<td height="50px">
текст5
</td>
</tr>
<tr>
<td colspan=3>
низ
</td>
</tr>
</table>Все наша таблица готова, теперь нужно на нее посмотреть, перед тем, как ставить. Для этого сохраняем ваш блокнот в формате html - в имени файла в конце должно быть написано .html
Теперь открываем вашу таблицу в браузере и вуаля - результат моей таблицы, на третьей картинки
Отредактировано Antony (22-06-2009 12:59:50)
