Простая вёрстка в HTML. Урок №3.
Вёрстка таблицами. Часть-1.
На прошлом занятие, мы с вами создали, почти пустую HTML страницу. Сегодня мы начнем создавать каркас нашей будущей страницы. Но прежде чем мы начнем созидать, хотелось бы объяснить саму суть, что, как и почему мы это будем делать. На сегодняшний день все стилевые оформления страниц, делаются при помощи каскадных таблиц стилей, или проще говоря, CSS. Но до появления CSS все страницы и сайты создавались, только с помощью обычных таблиц и HTML. Хотя в интернете ещё до сих пор полным полно сайтов, которые созданных, на одних таблицах, или смешанный так сказать дизайн. Но что бы понять преимущества, CSS и полностью оценить его достоинства, то нельзя миновать путь, создавая структуру сайта и минуя таблицы. Именно поэтому мы и будем создавать нашу, первую страничку при помощи обычных таблиц. Сразу скажу, наберитесь терпения и будьте внимательны, поскольку для новичков этот процесс немного сложный и путанный.
Код таблицы HTML.
<table style="width: 1024px; height: 100px; text-align: center; margin-left: auto; margin-right: auto;"
bgcolor="#00FFFF" bordercolor="#0000FF" border="1" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
Как устроена таблица в HTML.
И так перед нами код таблицы, который нам надо вставить, в нашу страничку index.html, которую мы создали на прошлом занятие. Для этого удалите строку приветствия, она нам больше не понадобится.
<center><h1>Hello world!</h1></center>И вставьте код таблицы между тегами <body></body>. Сохраните и запустите в браузере. Что мы видим узкую прямоугольную таблицу, с фоном и бордюром. В дальнейшем мы уберём бордюр и фон, но сейчас нам нужна визуализация, что бы мы, не запутались в своих творениях. Эта таблица послужит нам основным каркасом, в которую мы вложим ещё целую кучу таблиц, для шапки сайта, боковых колонок, основной части и нижней. А пока давайте изучим структуру данной таблицы.
<table style="width: 1024px; height: 100px; text-align: center; margin-left: auto; margin-right: auto;"Начнём с верхней строки. Первое что мы видим после открытия кода <, это парный тегtable, который сообщает браузеру, что он имеет дело с таблицей. Дальше браузер получает информацию о стиле таблице, на это ему указывает style=" , где width: 1024px; это ширина таблицы, а height: 100px; высота, в дальнейшем мы её заменим, на проценты вот так height: 100%;.
Здесь text-align: center; мы указываем браузеру, как будет формироваться содержимое таблицы, в данном случае по центру. Что бы наша таблица, не прилипала к левому краю экрана монитора, Нам надо задать параметры, как он должен определить отступы, ведь мониторы у всех разные, вот тут нам поможет тег margin, который и расскажет что да как. А говорит он вот что margin-left: auto; margin-right: auto; отступы справа и с лева, определять автоматический, в зависимости от ширины экрана. Закрываем эту строку ", и переходим к нижней части.
bgcolor="#00FFFF" bordercolor="#0000FF" border="1" cellpadding="0" cellspacing="0">В этой строке нас встречает bgcolor="#00FFFF" , этот тег задаёт цвет фона нашей таблицы, то есть если мы с него сейчас уберём код цвета bgcolor="" , наш фон станет белым, точнее прозрачным. Следующим идёт, bordercolor="#0000FF" этот тег определяет цвет бордюра, а вот уже толщину бордюра определяет border="1", где значение 1 это его толщина в пикселях, если вместо 1 поставить 0, то и цвет и бордюр перестанут, отображается. Тег cellpadding="0", указывает расстояние от рамки до содержимого, пока он имеет 0 значение, но возможно он нам понадобится. Расстояние между ячейками нам задаст cellspacing="0", который то же пока имеет 0 значение.
Далее идут парные теги <tbody> и <tr>, сейчас мы не будем заострять на них внимание, дабы не запутаться, поскольку к ним тоже можно задать параметры, а это мы сделаем в процессе вёрстки нашей таблицы. И вот перед нами парный тег <td></td>, это и есть контейнер, куда вставляется само содержимое таблицы, например вот так <td>Привет!</td>. Ну а ниже пошли все закрывающие теги, завершающие обзор таблицы.
Пожалуй, на этом закончим, урок, что бы вы смогли до конца переварить всю информацию. Дорогие, читатели моего блога, теперь практический в каждом уроке, «Простая верстка в HTML», вы будите иметь возможность просмотреть результат работы каждого урока и скопировать код. Для этого вам необходимо нажать на кнопку «Смотреть пример №..» и перед вами откроется то, что мы будем изучать на определённом этапе.
До встречи в следующем уроке «Простая вёрстка в HTML. Урок №4.», «Вёрстка таблицами. Часть-2».
Комментарии 2
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.