Цитата сообщения Legionary
Html для начинающих ( часть 4-ая, таблицы, разрешение экрана)
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>
Смотрим
что получилось .
Вот как-то так:-) пробуйте, теперь возможности по оформлению нааамного больше;-)
Про таблички еще будем говорить и не раз) Как фон таблицы делать, размер определенной ячейки и пр.,пр.,пр.
Как всегда,- вопросы либо в личку, либо
сюда:-) Всем удачи:-)
Я - фотографПлагин для публикации фотографий в дневнике пользователя. Минимальные системные требования: Internet Explorer 6, Fire Fox 1.5, Opera 9.5, Safari 3.1.1 со включенным JavaScript. Возможно это будет рабо
ОткрыткиПерерожденный каталог открыток на все случаи жизни
Для дизайнеровтаблица цветов для дизайнера
), все они разные. У кого маленькие, у кого большие, у кого средние:-) ( у каждого есть свое разрешение, что это такое можете почитать в интернете, я вас грузить подробностями не буду и в дальнейшем буду называть это просто "размер монитора". Не очень правильно конечно, но так проще мне кажется)
