Привет друзья. Я извиняюсь, что так долго писал второй урок, к сожалению, не могу пока пообещать, что уроки будут выходить быстро, потому что помимо этого блога я сейчас занимаюсь еще несколькими и, соответственно, времени не остается, совсем учитывая то, что еще и оффлайн работа нагружает. Тем не менее, сегодня мы с вами разберем, что такое таблицы и уже сделаем каркас для нашей будущей главной странички. Советую кстати вам уже задумываться на счет тематики сайта, который вы планируете сделать.
От себя могу дать совет, что сделайте что-нибудь простенькое, я вот, например, буду делать сайт по теме форекса, но не потому что хочу заработать много денег, а просто как пример. На развитие еще одного сайта у меня сейчас точно времени не будет. Вы же если хотите развивать сайт, то можете сразу сделать что-нибудь над, чем потом будете работать в плане раскрутки. Итак, переходим непосредственно к изучению таблиц.
В конце у нас с вами получится примерно вот такой макет нашего будущего сайта.
Но для начала давайте разберемся, что такое таблица и как ее строить.
Что такое таблица и как построить таблицу
Все таблицы, которые строятся при помощи html, записываются вот такими тегами <table> причем учтите что таблица всегда должна иметь закрывающий тег, иначе ничего хорошего из этого не получится. Изначально, все таблицы задаются без рамок, т.е если вы напишете просто теги и внутри какую-либо информацию, то она просто будет отображаться ,без каких-либо границ, однако для того чтобы сделать рамку видимой, как на рисунке, нам понадобится прописать в таблице вот такой атрибут border=»1px», который говорит что рамка таблицы (border в переводе с английского рамка) равна 1px.
Однако того что вы напишете два тега <table> мало, необходимо чтобы у таблицы были ячейки, давайте разберемся как их записывают.
Построение ячеек в таблице
Итак, ячейки таблицы состоят из рядов и столбцов. Ряды записываются тегами <tr> а столбцы тегами <td>. Таким образом, если мы напишем:
<table border="1">
<tr>
<td>ряд 1 ячейка1</td> <td>ряд1 ячейка2</td>
</tr>
<tr>
<td>ряд 2 ячейка 1</td> <td>ряд 2 ячейка 2</td>
</tr>
</table>
то браузер отобразит нам примерно такую картинку:
Кто не понял с первого раза, то объясню еще раз. При построении таблицы сначала у вас идет тег <table> затем идет тег <tr> затем тег <td> ну и я наглядно нарисовал это на картинке можете посмотреть
Итак, как рисовать ячейки мы разобрались, теперь давайте разберемся, как объединить ячейки, потому что иногда это тоже бывает очень нужным. Итак, за объединение ячеек отвечают такие атрибуты как colspan и rowspan
Colspan объединяет ячейки по горизонтали, а rowspan по вертикали. Таким образом, если написать вот такой код:
<table border="1">
<tr>
<td colspan="2">ряд 1 ячейка 1+2</td>
</tr>
<tr>
<td>ряд 2 ячейка 1</td> <td>ряд 2 ячейка 2</td>
</tr>
</table>
то получим вот такую картинку:
Если же записать вот такой примерчик:
<table border="1">
<tr>
<td rowspan="2">Ячейка 1, ряд 1+2</td>
<td>ряд1 ячейка2</td>
</tr>
<tr>
<td>ряд 2 ячейка 2</td>
</tr>
</table>
то получим вот такую картинку:
Я намерено все рисую, чтобы было нагляднее. Кто сомневается в правильности кода, то скопируйте любой код в блокнот и сохраните страницу как html документ, как это делать я говорил в первом уроке. После того откройте файл в браузере и увидите что получиться.
После того как разобрались с объединением ячеек идем дальше.
Внутренние и внешние отступы в ячейках
Ячейки также можно редактировать, задавая им отступы как внутренние, так и внешние. Делается это при помощи атрибутов CELLPADDING и CELLSPACING. cellpading отвечает за внутренние отступы, а cellspacing за внешниее. Для наглядности смотрите картинку.
И в завершении теоретической части расскажу еще про выравнивание в ячейках, а также как задать фон определенной ячейке.
Как задать выравнивание и фон ячейки таблицы
Так вот:
ALIGN — задает выравнивание по горизонтали, может иметь три значения center left right и center по умолчанию выравнивание идет по левому краю
VALIGN — задает выравнивание по вертикали, может принимать значения top bottom middle. первое прижимает содержимое к верху ячейки второе свойство к низу ну и третье выравнивает его по центру.
BGCOLOR — задает цвет фона ячейки. Цвета можно задавать как в шестнадцатеричном значении так и словами, но об этом позже.
BACKGROUND — позволяет задавать фоновое изображение для ячеек.
С этими всеми свойствами мы наглядно столкнемся уже на практике, когда будем задавать стили нашему сайту. А сейчас собственно давайте сделаем наш с вами первый макет. Для этого пишем такой код, используя все навыки которые мы с вами прошли сегодня и в прошлом уроке.
Вот что получилось у меня:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<!--Голова-->
<head>
<title>Моя первая страничка</title>
</head>
<!--Конец головы начало тела-->
<body>
<h1>Наш первый макет сайта</h1>
<!--Начало таблицы-->
<table width="100%" height="600px" border="1px">
<tr>
<!--Начало логотипа-->
<td width="200px" align="center">
логотип
</td>
<!--конец логотипа начало лозунга-->
<td align="center" colspan="2">
лозунг нашего сайта
</td>
<!--конец лозунга начало тела макета-->
</tr>
<tr>
<!--Начало левого сайдбара-->
<td width="200px" align="center" height="300px">
левый сайдбар
</td>
<!--Начало контента и конец сайдбара левого-->
<td align="center" height="300px">
основной контент
</td>
<!--Начало правого сайдбара и конец контента-->
<td width="200px" align="center" height="300px">
правый сайдбар
</td>
</tr>
<!--конец тела макета и начало подвала-->
<tr>
<td colspan="3" align="center">
подвал
</td>
</tr>
<!--конец подвала-->
</table>
</body>
</html>
Заметьте, что я использовал атрибут collspan, который объединил две ячейки в шапке, а ячейка подвала вообще расширена на 3 места. Этот макет называется резиновый. Я задал только ширину и двух сайдбаров по 200px тем самым основной контент у нас растягивается, можете поизменять окно браузера и посмотреть, что получиться.
Если вам по каким-то причинам не нравится табличный макет, то я также разбирал в одной из своих статей как верстать на дивах, можно почитать ее. Ну а на сегодня у меня все спасибо за внимание в следующем уроке мы начнем разбирать стили css, а также уже наполним нашу главную страницу. Следите за обновлениями.
После того как закончим курс, можете уже начинать экспериментировать с более сложными сайтами. Ведь если вы научитесь делать простые сайты, то вам нужно будет идти дальше и узнавать, например, что такое разработка корпоративных сайтов, потому что там крутятся хорошие деньги.
Понравился пост? Зацени другие:
