Категории
Популярные материалы
- Как Создать Сайт
- Как создать свой сайт. Учебник Для Начинающих
- Создание сайтов самостоятельно бесплатно
- Определение значения и нахождение цвета. Определить цвет онлайн
- Домен, уровни доменов, домен второго уровня, как выбрать домен для сайта
- Хостинг, виртуальный хостинг, что такое хостинг сайта, бесплатный хостинг сайтов
- Phoca Gallery - фотогалерея для joomla 3.0, 2.5 и 1.5
- Функции javascript
Таблицы. Форматирование границ таблицы
- Подробности
- Создано 07.02.2014 10:50
- Дата публикации
Таблица — это сетка из ячеек, выстроенная из строк и столбцов. Первоначально проектировщики использовали таблицы для (предсказуемого) табличного отображения информации. Но хитрые веб-разработчики быстро обнаружили, что невидимые таблицы предполагают идеальную возможность разместить содержимое страницы самыми разными способами.
В следующих разделах вы попробуете создать таблицы, используя язык XHTML.
Анатомия таблицы
Вы можете сделать таблицу на скорую руку, воспользовавшись лишь несколькими новыми XHTML-элементами.
- <table> охватывает всю таблицу целиком. Это — отправная точка для каждой таблицы.
- <tr> представляет отдельную строку таблицы. Каждый элемент <table> таблицы содержит серию из одного или более элементов <tr>.
- <td> представляет отдельную ячейку таблицы, отвечает за данные таблицы. Для каждой ячейки, которую мы хотим видеть в столбце, мы добавляем один элемент <td>. Между элементами <td> вы вставляете текст или числа, элементы изображений <img> или почти любой элемент XHTML по желанию, который вы хотите увидеть в этой ячейке. Если вы добавляете в ячейку текст, шрифт отображаемого текста получится таким же, как и шрифт основного текста страницы, который помещается внутри контейнера <body>.
- <th> — дополнительный (необязательный) элемент таблицы, который вы используете для определения заголовка столбца. Вы можете использовать элемент <th> внутри элемента <td> в любое время, хотя обычно это имеет смысл делать в первой строке таблицы. Браузеры форматируют текст внутри контейнера <th> почти так же, как текст между элементами <td>, кроме того, они автоматически выделяют жирным шрифтом и центрируют текст, если вы не применяете другие правила форматирования из таблицы стилей.
ПРИМЕЧАНИЕ
Есть еще несколько элементов, предназначенных для описания таблиц, но они остались за кадром. Элементы <thead>, <tbody>, <tfoot> и <caption>— этоте элементы, в которых веб-дизайнеры больше не нуждаются или которые не поддерживаются всеми браузерами.
При написании кода разметки этой таблицы используется отступ, что помогает увидеть структуру таблицы. Такое расположение элементов таблицы, как в этом примере, с отступом — всегда хорошая идея, при этом легко обнаружить неправильные теги. В этом примере содержимое контейнера <td> — обычный текст. Но вы можете поместить в ячейки таблицы также и другие XHTML-элементы, включая гиперссылки (элемент <а>) и изображения (элемент <img>).
Поскольку большинство инструментов для веб-разработки включают собственные редакторы таблиц, которые позволяют вам указывать значения и формировать таблицы щелчком мыши, вы можете избавиться от создания таблиц вручную. Эти функции для образования таблиц подобны тем, которые вы можете найти в программах — текстовых редакторах.
Форматирование границ таблицы
Традиционные таблицы имеют границы вокруг каждой ячейки. Вы можете регулировать границы таблиц с помощью атрибута border. Этот атрибут определяет ширину (в пикселах) линии, которую добавляет
браузер в качестве границы вокруг каждой ячейки и вокруг таблицы в целом. Например:
<table border="l">
... </table>
Хотя вы и можете выбрать толщину линии границы, но не можете управлять ее стилем. Большинство браузеров обводит таблицу сплошной черной линией с отбортованной кромкой. Не ограничивайте себя только этими автоматическими границами. Если они вам не нравятся, есть обходной путь: таблицы стилей. Основной прием состоит в том, чтобы создать таблицу без границ, а затем применить атрибут границы к некоторой комбинации элементов <tr>,<td>, <th> и <table>. Вы можете найти описание свойств атрибута border из таблицы стилей.
Следующие правила таблицы стиля устанавливают тонкую синюю границу вокруг каждой ячейки и толстую синюю границу вокруг всей таблицы:
table (
border-width: Зрх;
border-style: solid;
border-color: blue;
}
td, th {
border-width: lpx; border-style: solid; border-color: blue; }
Есть одна загвоздка, которую можно наблюдать при создании таблиц с границами. Если таблица включает пустые ячейки, они появятся «деформированными», это означает, что они совсем не получат границ.
Чтобы предотвратить «деформацию» ячеек, добавьте единичный знак неразрывного пробела к разметке ячеек таблицы.
Браузер не отобразит этот пробел, однако при этом границы ячейки останутся на месте.
