Мобильный LiveInternet Html для начинающих ( часть 4-ая, таблицы, разрешение экрана)

Авторизация

Дневник Legionary Лента друзей - Дневник - Полная версия

Html для начинающих ( часть 4-ая, таблицы, разрешение экрана) 23-12-2009 09:32 к комментариям - к полной версии - понравилось!

Html для начинающих ( часть 4-ая, таблицы)

Пожалуй, одна из важнейших тем по html. Только не пугайтесь, важность не означает сложность:-)
Когда я начинал изучать html долго не мог врубиться че ж такого хорошего в таблицах.. таблички и таблички вроде, ничего особенного...)))
Короче говоря, отсеиваем наше общепринятое понятие этого слова и начинаем изучать:-)

Основная функция таблиц в html, на мой взгляд, это разграничение пространства. Т.е. разделение странички на сектора, участки.

Посмотрите на дизайн нашего ЛиРу :-) Слева столбик и справа столбик чуть пошире. Вот и разграничение пространства) все на своем месте, а не где попало)
Все, думаю основную мысль вы поняли) Теперь идем изучать:-)

Таблица делится на строки и столбики. Соответственно получаются ячейки.
Таблица вставляется в саму страничку, поэтому прописывать ее надо между тегами <body> и </body> ( о том,- что это такое, говорили раньше)

Тег таблицы прописывается так <table> , этот тег требует закрытия, т.е. окончание таблицы обозначаем закрывающим тегом </table>
Просто так таблица быть не может:-) думаю это понятно. В таблице должны быть минимум одна строка и минимум один столбик:-)

Строка обозначается тегами <tr> и </tr>, т.е. открывающий строку тег и закрывающий.

Столбик же обозначается тегами <td> и </td>
Содержимое таблицы ( тексты,картинки и пр.) уже прописывается в столбиках, т.е. между тегами столбиков.

Теперь по-русски:-)
Таблица,в ней строка, в ней столбик.
Самый просто код таблицы получается такой:
<table>
<tr>
<td>Содержимое таблицы</td>
</tr>
</table>

Внимательно следим за последовательностью закрытия тегов! Помните правило, я надеюсь?;-)

А теперь как всегда полностью код странички с одной просто таблицей:

<html>
<head>
<title>Моя первая страничка</title>
</head>
<body>

<table>
<tr>
<td>Всем привет!!!</td>
</tr>
</table>

</body>
</html>

Но в результате особых изменений вы не увидите:-) Это потому что мы ничего в нашей табличке не настроили.

Таблица по умолчанию растягивается в зависимости от ее содержимого. Т.е. не имеет фиксированного размера. Нам это не подходит, если мы хотим с помощью таблицы разграничить пространство нашей будущей странички:-) И тут возникает еще одно очень нужное нам понятие как "разрешение экрана"
Объясню максимально простым языком не используя умных слов:-)

У каждого из нас есть монитор ( логично, если вы можете это прочитать

), все они разные. У кого маленькие, у кого большие, у кого средние:-) ( у каждого есть свое разрешение, что это такое можете почитать в интернете, я вас грузить подробностями не буду и в дальнейшем буду называть это просто "размер монитора". Не очень правильно конечно, но так проще мне кажется)

Так вот, предположим что мы задали нашей таблице фиксированную ширину. Размер указали в пикселях ( э... определенная мера такая), а точнее поставили ширину равную 800 пикселей. Как нам кажется на весь экран. Но тут приходит пользователь, у которого ширина экрана не 800, а, например, 1280 ( у меня такая)... Логично понять, что для него наша таблица уже не будет во весь экран, и сайт не будет смотреться как было изначально задумано )

Варианты решений такой проблемы конечно же есть. Их несколько. Расскажу только один, которым я пользуюсь) об остальных поговорим чуть позже:-)
Все просто, ширину таблицы можно указать не только в пикселях, но и в процентах. А проценты,- они и в африке проценты:-))
Прописываем ширину таблицы равной 100% и она будет соответствовать любому размеру экрана:-)

Теперь как это сделать)
Параметр ширины относится к самой таблице, поэтому и должен быть прописан в теге <table>
Ширина обозначается "словом" width. Т.е. пишется ширина="размер"
А теперь целиком:
<table width="100%">

Далее все по схеме - обозначаем строки и столбики и закрываем таблицу:-)

Пора закругляться, тема большая и сразу все осознать не так просто)) Еще один параметр и хватит пока:-)

Толщина обводки - в принципе, для разграничения пространства странички нам этот параметр использовать не надо, но чтоб увидеть результат вполне можно им пользоваться)
Параметр этот обозначается словом "border". Точно так же вписывается в тег таблицы, а прописывается так же, как и ширина, т.е. - толщина обводки="размер в пикселях".
Конкретно так:
<table border="1">

Пропишем одновременно и ширину таблицы:
<table border="1" width="100%">

Как видите, параметры эти прописываются просто в теге table через пробел. Без каких либо знаков разделения:-)

А теперь как вседа полностью код странички с таблицей:-) пропишем ширину равную 100%, кол-во столбиков будет 3 штуки, в каждый впишем по предложению и посмотрим что получится:-)

<html>
<head>
<title>Моя первая страничка</title>
</head>
<body>

<table border="1" width="100%">
<tr>

<td>Всем привет!!!</td>
<td>Всем привет еще раз!!!</td>
<td>И снова,- Всем привет!!!</td>

</tr>
</table>

</body>
</html>

Смотрим что получилось .
Теперь напишем такой же код странички, но уберем параметр border="1".
Смотрим что получилось .

А теперь, поставим во второй столбик картинку, например. Как вставлять картинки мы уже учились, так что вспоминайте;-) Но на всякий случай вот весь код странички:

<html>
<head>
<title>Моя первая страничка</title>
</head>
<body>

<table border="1" width="100%">
<tr>

<td>Всем привет!!!</td>
<td><img src="http://legion-blog.narod.ru/yroki/1.gif" /></td>
<td>И снова,- Всем привет!!!</td>

</tr>
</table>

</body>
</html>

Смотрим что получилось .

Вот как-то так:-) пробуйте, теперь возможности по оформлению нааамного больше;-)
Про таблички еще будем говорить и не раз) Как фон таблицы делать, размер определенной ячейки и пр.,пр.,пр.

Как всегда,- вопросы либо в личку, либо сюда:-) Всем удачи:-)

вверх^ к полной версии понравилось! в evernote

Комментарии (140): вперёд» последняя»

Wella_Wella 23-12-2009-10:16 удалить

Господи, как сложно... но я постараюсь разобраться... Спасибо БОЛЬШОЕ за урок!!!

Вы сейчас не можете прокомментировать это сообщение.