Цитата сообщения Legionary
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>
Смотрим
что получилось .
Вот как-то так:-) пробуйте, теперь возможности по оформлению нааамного больше;-)
Про таблички еще будем говорить и не раз) Как фон таблицы делать, размер определенной ячейки и пр.,пр.,пр.
Как всегда,- вопросы либо в личку, либо
сюда:-) Всем удачи:-)
), все они разные. У кого маленькие, у кого большие, у кого средние:-) ( у каждого есть свое разрешение, что это такое можете почитать в интернете, я вас грузить подробностями не буду и в дальнейшем буду называть это просто "размер монитора". Не очень правильно конечно, но так проще мне кажется)
