-Всегда под рукой

 -Метки

 -Поиск по дневнику

Поиск сообщений в Legionary

 -Подписка по e-mail

 

 -Статистика

Статистика LiveInternet.ru: показано количество хитов и посетителей
Создан: 16.05.2009
Записей:
Комментариев:
Написано: 27398

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

Среда, 23 Декабря 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>


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

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

Как всегда,- вопросы либо в личку, либо сюда:-) Всем удачи:-)
Рубрики:  html для начинающих
Метки:  

Процитировано 480 раз
Понравилось: 16 пользователям

Wella_Wella   обратиться по имени Среда, 23 Декабря 2009 г. 10:16 (ссылка)
Господи, как сложно... но я постараюсь разобраться... Спасибо БОЛЬШОЕ за урок!!!
Ответить С цитатой В цитатник
Перейти к дневнику

Четверг, 24 Декабря 2009 г. 09:32ссылка
Wella_Wella, все просто на самом деле:-) главное уверенно подойти к делу;-)) удачи тебе
Осень-я   обратиться по имени Среда, 23 Декабря 2009 г. 10:21 (ссылка)
Cпасибо!
Ответить С цитатой В цитатник
nebo-nebo   обратиться по имени Среда, 23 Декабря 2009 г. 10:29 (ссылка)
Огромное тебе СПАСИБО!!!! Мне это очнь- очень-очень нужно!!!
СПАСИБО!!!
Ответить С цитатой В цитатник
Перейти к дневнику

Четверг, 24 Декабря 2009 г. 09:33ссылка
Julia_Nebo, всегда пожалуйста:-)) постараюсь написать след часть побыстрее:-))
OLGA_FM   обратиться по имени Среда, 23 Декабря 2009 г. 10:47 (ссылка)
С П А С И Б О !!!!
Ответить С цитатой В цитатник
Перейти к дневнику

Четверг, 24 Декабря 2009 г. 09:33ссылка
OLGA_FM, пожалуйста:-))
Дария_Швельниц   обратиться по имени Среда, 23 Декабря 2009 г. 11:29 (ссылка)
Спасибо большое за урок!!!
Ответить С цитатой В цитатник
Перейти к дневнику

Четверг, 24 Декабря 2009 г. 09:33ссылка
Дария_Швельниц, всегда пожалуйста:-))
sophy-catherine   обратиться по имени Среда, 23 Декабря 2009 г. 11:33 (ссылка)
- золотце Вы наше! Спасибо, Вам дорогой Вы наш человек!Супер!
Ответить С цитатой В цитатник
Перейти к дневнику

Четверг, 24 Декабря 2009 г. 09:33ссылка
sophy-catherine, эта тема тоже пригодится?;-))
Бахыт_АБМ   обратиться по имени Среда, 23 Декабря 2009 г. 12:51 (ссылка)
Спасибо за урок!
Ответить С цитатой В цитатник
Перейти к дневнику

Четверг, 24 Декабря 2009 г. 09:34ссылка
АБМ, всегда пожалуйста:-))
Ledy_Alone   обратиться по имени Среда, 23 Декабря 2009 г. 13:06 (ссылка)
Спасибо за пост- полезный и нужный)!:appl:
Ответить С цитатой В цитатник
Перейти к дневнику

Четверг, 24 Декабря 2009 г. 09:34ссылка
Ledy_Alone, всегда пожалуйста:-))
Inmira   обратиться по имени Среда, 23 Декабря 2009 г. 16:03 (ссылка)
Сипасиб большой)))
Ответить С цитатой В цитатник
Перейти к дневнику

Четверг, 24 Декабря 2009 г. 09:36ссылка
Inmira, за что?? америку открыл?;-)))) а то ты не знаешь столь вумные вещи:-)))
Ират   обратиться по имени Среда, 23 Декабря 2009 г. 16:11 (ссылка)
Спасибо!
Ответить С цитатой В цитатник
Перейти к дневнику

Четверг, 24 Декабря 2009 г. 09:36ссылка
Ират, пожалуйста:-))
aleks_c   обратиться по имени Среда, 23 Декабря 2009 г. 16:33 (ссылка)
Спасибо, Алекс!
Ответить С цитатой В цитатник
Перейти к дневнику

Четверг, 24 Декабря 2009 г. 09:36ссылка
aleks_c, всегда пожалуйста, Алекс:-))
Smelena   обратиться по имени Среда, 23 Декабря 2009 г. 16:48 (ссылка)
Приветик, Лешенька)))
Спасибки тебе в очередной раз, за абсолютно точное, и понятное объяснение! Пожалуй, я еще нигде такого не встречала!
Возьму себе, это всегда пригодится, можа склероз наступит внезапно?
С наступающим тебя, и всех благ)))
 (500x500, 166Kb)
Ответить С цитатой В цитатник
Перейти к дневнику

Четверг, 24 Декабря 2009 г. 09:37ссылка
Smelena, нее, склероз низяяяя:-))) а тема действительно полезная:-) а то глянешь так иногда в эпиграфы на лиру... и поймешь что табличка вещь оч полезная:-))
Валентина_Гребенюк   обратиться по имени Среда, 23 Декабря 2009 г. 18:15 (ссылка)
спасибо!
Ответить С цитатой В цитатник
Перейти к дневнику
Kapitoshka_N   обратиться по имени Среда, 23 Декабря 2009 г. 19:20 (ссылка)
Legionary, спасибо :) Конечно, нужно разобраться :) Поэтому беру к себе :) На досуге "поломаю голову" :) Ты молодчина, Лёш :)
Ответить С цитатой В цитатник
Перейти к дневнику

Четверг, 24 Декабря 2009 г. 09:38ссылка
Kapitoshka_N, голову...ломать...мож не надо?;-))) пригодится еще ж:-))
Перейти к дневнику

Четверг, 24 Декабря 2009 г. 17:48ссылка
Legionary,
Может и пригодится :))))))) Доброго вечерочка :))))
Вера_Смирнова   обратиться по имени Среда, 23 Декабря 2009 г. 19:31 (ссылка)
Ответить С цитатой В цитатник
Перейти к дневнику
Наталья_Петрова11   обратиться по имени Среда, 23 Декабря 2009 г. 20:00 (ссылка)
Спасибо!!
Ответить С цитатой В цитатник
Перейти к дневнику
Дарина423   обратиться по имени Среда, 23 Декабря 2009 г. 21:00 (ссылка)
Спасибо, Алексей!!!
Ответить С цитатой В цитатник
Перейти к дневнику

Четверг, 24 Декабря 2009 г. 09:39ссылка
Дарина423, всегда пожалуйста:-))
Бархатная_Шляпка   обратиться по имени Среда, 23 Декабря 2009 г. 22:21 (ссылка)
Большое спасибо! Буду изучать.
 (150x150, 15Kb)
Ответить С цитатой В цитатник
Перейти к дневнику

Четверг, 24 Декабря 2009 г. 09:39ссылка
Бархатная_шляпка, всегда пожалуйста:-)) успехов в изучении:-))
Coko   обратиться по имени Среда, 23 Декабря 2009 г. 23:18 (ссылка)
Спасибо! Надо разобраться на досуге.
Ответить С цитатой В цитатник
Перейти к дневнику

Четверг, 24 Декабря 2009 г. 09:39ссылка
Coko, всегда пожалуйста:-)) вещь крайне полезная:-))
Gali50na   обратиться по имени Четверг, 24 Декабря 2009 г. 00:56 (ссылка)
Ответить С цитатой В цитатник
Перейти к дневнику

Четверг, 24 Декабря 2009 г. 09:39ссылка
Gali50na, ой спасибооо!
BaBotschka   обратиться по имени Четверг, 24 Декабря 2009 г. 03:19 (ссылка)
Большое спасибо! Надеюсь, что разберусь.
Ответить С цитатой В цитатник
Перейти к дневнику

Четверг, 24 Декабря 2009 г. 09:40ссылка
BaBotschka, всегда пожалуйста:-)) все должно получится:-))
LebWohl   обратиться по имени Четверг, 24 Декабря 2009 г. 03:21 (ссылка)
Леша спасибо тебе большое за очередной полезный пост.С наступающим тебя.
Ответить С цитатой В цитатник
Перейти к дневнику

Четверг, 24 Декабря 2009 г. 13:18ссылка
Kisska67, спасибо большое! и Вас с наступающим:-) отлично встретить тигра;-)
Ирина_Жекина   обратиться по имени Четверг, 24 Декабря 2009 г. 06:32 (ссылка)
Спасибо большое, вдруг и правда получится разобраться :))
Ответить С цитатой В цитатник
Перейти к дневнику

Четверг, 24 Декабря 2009 г. 13:19ссылка
Ирина_Жекина, а почему нет? должно все получится:-)))
LVN   обратиться по имени Четверг, 24 Декабря 2009 г. 07:03 (ссылка)
Спасибо.
Ответить С цитатой В цитатник
Перейти к дневнику

Четверг, 24 Декабря 2009 г. 13:19ссылка
LVN, пожалуйста:-))
Ирина_Скрябина   обратиться по имени Четверг, 24 Декабря 2009 г. 07:08 (ссылка)

СПАСИБО
Ответить С цитатой В цитатник
Перейти к дневнику
Sillia   обратиться по имени Четверг, 24 Декабря 2009 г. 07:24 (ссылка)
спасибо большое!:mms_flowers:
Ответить С цитатой В цитатник
Перейти к дневнику

Четверг, 24 Декабря 2009 г. 13:19ссылка
Sillia, ты же уже прошла таблички?;-))
Перейти к дневнику

Четверг, 24 Декабря 2009 г. 14:45ссылка
Legionary, а повторение - мать учения ;))
Перейти к дневнику

Воскресенье, 27 Декабря 2009 г. 00:29ссылка
Sillia, повторила? помнишь?;-)))
Валентин_Фролов   обратиться по имени iiii Четверг, 24 Декабря 2009 г. 08:39 (ссылка)
Сколько восторгов от Женщин Вам ,
Мы Вам также Cчастье желам.
Это под рифму. Хорошего Нового Нода.
Ответить С цитатой В цитатник
Перейти к дневнику

Четверг, 24 Декабря 2009 г. 13:20ссылка
Валентин_Фролов, спасибо:-) С наступающим и Вас:-))
Симонова_Галина   обратиться по имени Четверг, 24 Декабря 2009 г. 09:12 (ссылка)
Ответить С цитатой В цитатник
Перейти к дневнику
Tigrasha_dance   обратиться по имени Четверг, 24 Декабря 2009 г. 09:42 (ссылка)
тож присоединяюсь ко всем,поющие дифирамбы=))))
а таблицы тож классно!=)) как и кнопочки=))))

Ответить С цитатой В цитатник
Перейти к дневнику

Четверг, 24 Декабря 2009 г. 13:20ссылка
Tigrasha_dance, а таблица с кнопочкам и... вообще супер получается?;-)))
azazela502   обратиться по имени Четверг, 24 Декабря 2009 г. 10:19 (ссылка)
ДА.... трудновастенько.... Будем помаленьку осваивать...
СПАСИБО!!!
Ответить С цитатой В цитатник
Перейти к дневнику

Четверг, 24 Декабря 2009 г. 13:21ссылка
azazela502, это на первый взгляд только:-)) успехов в освоении:-))
Комментировать К дневнику Страницы: [1] 2 3 [Новые]
 

Добавить комментарий:
Текст комментария: смайлики

Проверка орфографии: (найти ошибки)

Прикрепить картинку:

 Переводить URL в ссылку
 Подписаться на комментарии
 Подписать картинку