урок #3.
Итак. На этом уроке,мы научимся делать таблицы окончательно. Что бы это сделать давай рассмотрим код стандартной табоицы,которую ставят в html.
1)<table> - тег создания таблиц
2)<table border="1" width="100%"> - начало
1 - толщина рамок,если ставить 0,то без рамок.
100% - расположение таблицы в процентах. 100 % - как размер форума. 95 % поменьше.
Под цифрой 2,тот код,с которого обычно начинается такая таблица. Посмотрим дальше:
<tr>
<td height="25" width="800" colspan="2" align="center">Приветствие</td></tr>
height="25 - высота окошка в пикселях.
width="800 - ширина окошка (чаще должна быть такой же как ширина вашего форума)
align="center - мы уже знаем, текст в центре
colspan="2" - сколько столбцов будет под этой строчкой. для нашей таблицы будет 2 столбца под строчкой приветствия.
Благодаря этой первой сторочке у нас получается:
новая строка,с шириной как форум, с небольшой высотой и тестом приветствия расположеном посередине.
Теперь мы,допустим после этой строчки приветствия заходим создать большую ячейку для картинки,которая займет ровно половину таблицы. Что нам для этого нужно? Если вся таблица 800px,то половина будет соответственно 400px.
Значит какой у нас должен быть код? В нем должны присутствовать теги новой строки (tr), новой ячейки (td),ширина и высота ячейки,а так же код для вставления картинки. И вот что получается:
<tr>
<td height="250" width="400" align="center"><img src="ссылка на картинку"></td></tr>
Тут уже должно быть понятно: высота,ширина и то,что картинка будет расположена в центре. НО. Мы должны кое чем дополнить код. А именно тегом rowspan. Он определяет количество рядов, охваченных текущей ячейкой.
То есть вот что получилось:
<tr>
<td height="400" width="400" align="center" rowspan="2"><img src="ссылка на картинку"></td>
Это значит,что после ячейки с картинкой,у нас будет еще 2 ряда с ячейками. Дальше,что нам нужно это сделать эти два ряда. Вопрос как?Новая строка в данном случае не нужна. Поэтому берем только тег для новой ячейки,а так же ширину и высоту.
<td height="200" width="400" align="center">новости</td></tr>
Думаю это уже понятно. Теперь берем новую строку и создаем там точно такую же ячейку:
<tr><td height="200" width="400" align="center">объявление</td></tr>
В конце еще ставим </table>
Таблица готова. И вот ее полный код:
какой получилось таблица можешь посмотреть здесь :
http://testovik23.mybb.ru/