Задание 1. Набрать таблицу с разноцветными ячейками.
ПРАКТИЧЕСКАЯ РАБОТА № 5
ТЕМА: Размеры таблиц
Цель работы: изучить, как задаются размеры таблицы.
Оборудование: персональный компьютер, Windows XP.
Теоретическая часть: рассмотрим, как задаются размеры таблиц: мы можем задать ширину всей таблицы в целом единой цифрой. Это может быть, как 100% (т.е. от края до края доступного пространства), так и четкая ширина в пикселях (на примере - 200):
| В коде это пишется так: <table border="1" cellpadding="0" cellspacing="0"> | Или так: <table border="1" cellpadding="0" cellspacing="0"> |
По умолчанию (т.е. если в значении ширины после цифры не идет знак процента (%)), число, указанное в кавычках, будет расцениваться как пиксели. Главное отличие в том, что если размер указан жестко, в пикселях, то при сужении окна таблица "упрется" краями в тег, в который она вложена и не даст ему "сузиться", если тот имеет ширину, заданную относительно, т.е. в процентах от доступной ширины. Ширину мы задаем, вставляя в тег начала таблицы параметр
width="число ширины (можно в процентах)"
так же можно задать и вертикальный размер -
height="число ширины (только в пикселях!)"
Уточним все параметры, какими можно манипулировать в таблицах:
выравнивание : width и height - пишутся последовательно или одиночно. Транскрипция примерно <td height="число"> </td>
Параметры задаются целым числом, либо же целым числом с %, т.е. ="100%" - выравнять по ширине от стенки до стенки.
|
|
|
|
| <table border="0" height="100" cellspacing="4" cellpadding="0" bgcolor="#999999"> <tr bgcolor="#CCCCCC"> <td> </td> <td> </td> <td> </td> </tr> <tr bgcolor="#CCCCCC"> <td> </td> <td> </td> <td> </td> </tr> <tr bgcolor="#CCCCCC"> <td> </td> <td> </td> <td> </td> </tr> </table> |
или вот так:
|
| <table border="0" height="100" cellspacing="4" cellpadding="0" bgcolor="#999999"> <tr bgcolor="#CCCCCC"> <td> </td> <td> </td> <td> </td> </tr> <tr bgcolor="#CCCCCC"> <td> </td> <td> </td> <td> </td> </tr> <tr bgcolor="#CCCCCC"> <td> </td> <td> </td> <td> </td> </tr> </table> |
Теперь уточним значение использованных тегов:
bgcolor="код из шести цифр вида #000000" - задает фон ячейке, либо таблице - в зависимости, куда вставлен этот параметр.
bordercolor="#FFFFFF" - цвет бордюра (рамки)
Ну и про манипуляции с cellspacing и cellpadding не забываем :0) поварьируйте их размеры.
Но (более правильно!) чтобы улучшить восприятие текста, прежде всего необходимо воспользоваться в основной таблице отступом от краев (тег cellpadding), благодаря чему у вас останутся элегантные поля. Чтобы таблица не портила вида своей рамкой, советую основную таблицу делать "невидимой" при помощи тега border (назначьте "бордер=нуль" и рамки таблицы будет не видно). Также можно удалить параметр «бордер» из тега «таблица».
|
|
|
Теги выравнивания.
Имейте в виду, что сужаемая таблица растягивается по вертикали. И этим надо пользоваться. НЕ нужно пытаться подогнать текст под жестко-фиксированную таблицу - это ламеризм. В таблице есть несколько видов выравнивания содержимого относительно краев таблиц:
| align="left" | align="middle" | align="right" |
| align="center" | align="right" |
в каждой ячейке указан тип примененного в ней выравнивания, но кроме них существует еще и параметр justify. Это выравнивание по ширине с обоих краев. На большинстве страничек причем, что удивительно, даже на тех, которые делают казалось бы профессиональные команды, отсутствует выравнивание по правому краю: в каждой ячейке указан тип примененного в ней выравнивания, но кроме них существует еще и параметр justify.
Это выравнивание по ширине с обоих краев. На большинстве страничек причем, что удивительно, даже на тех, которые делают казалось бы профессиональные команды, присутствует такой ламеризм как отсутствие выравнивания по правому краю: обратите внимание на правый край - неровно, неряшливо. Если это выстроено парой-тройкой столбцов, как у многих Интернет "газет" и "журналов" для глаза - неприятно. Скорость и простота восприятия реально выше, когда глаз перескакивает на начало следующей строки с всегда одинакового места, чем когда строки кончаются +/- 1см от края. Особенно это касается больших и длинных текстов. Тег "justify"можно вписать в конкретную ячейку - <td align="justify"><td>. Назначая какой-либо части или всей таблице желаемое свойство, следует представлять, как оно повлияет на расположенную в таблице информацию:
|
|
|
выравнивание по левому краю
| ||||
тег выравнивания <centre></centre>, примененный на эту ячейку, на вложенную таблицу никоим образом не влияет - только на текст.
| ||||
применен тег выравнивания по левому краю, как в ячейке, так и в виде стандартного <centre>
а текст, как видите, может и обтекать таблицу с краев, и прилегать к тому краю, по которому выровнен. |
При помощи таблиц можно осуществить самый замысловатый дизайн, расположить содержимое практически как угодно...
Вот пример типичной организации сайта:
| логотип | баннер |
| меню |
Пример организации сайта с более сложной структурой
|
|
|
Основная таблица с двумя вертикальными разделителями, в ней вложены еще несколько таблиц, на рисунке они выделены черной каймой. Всмотритесь в структуру в целом - она поделена на вертикальные области, в которых "плавают" таблицы блоков - левой части, центральной части и правой части страницы.
Например у нас есть угол таблицы с менюшкой. От края надо отступить эндцать миллиметров, чтобы буквы не касались края экрана. Как это сделать? Способов есть много.
Например, ставим в ячейке главной таблицы выравнивание по правому краю, а в таблице, которую туда вкладываем, ставим выравнивание по левому. Вот что у нас получается:
| логотип | |
| 1 пункт 2 пункт 3 пункт 4 пункт 5 пункт | Ширина левой колонки - 130 пикселей, ширина вложенной таблицы - 110. В результате манипуляций с выравниванием имеем отступ от левого края 20 пикселей (разницу в ширине столбца и вложенной таблицы) Регулируем ширину вложенной таблицы. Чем она шире, тем ее левый край и, естественно, текст в ней, ближе к краю экрана. |
| пункт 1 пункт 2 пункт 3 пункт 4 пункт 5 | А можно сделать и такой эффект - тоже смотрится вполне прилично. |
Рассмотрим еще один полезный пример. Нам нужно вписать текст одной строкой, и чтоб таблица подстроилась под ширину этой самой строки. Но зачастую, если у таблицы не определен размер или определен заведомо меньший, чем у вашей строки, эту самую строку браузер перенесет во вторую. Чтобы не позволить такого переноса, нужно в тег ячейки вставить слово nowrap. Никаких параметров ему прописывать не нужно, просто выделить с обеих сторон пробелами. Строка в такой ячейке будет всегда прямая. Помните только, что она будет "распирать" дизайн при попытке ужать окно до более узких размеров. Советую проверить, как это будет смотреться и помнить об этом нюансе.
Порядок выполнения работы:
Задание 1. Набрать таблицу с разноцветными ячейками.
Дата добавления: 2019-02-12; просмотров: 98; Мы поможем в написании вашей работы! |
Мы поможем в написании ваших работ!