Толщина рамки таблицы задается с помощью атрибута. Простой способ создать рамку вокруг элемента
Сетка представляет собой набор горизонтальных и вертикальных линий между ячейками таблицы, которые отделяют содержимое ячеек друг от друга. Сетка используется по умолчанию, если включить отображение границ с помощью атрибута border тега
2004 | 2005 | 2006 | |
---|---|---|---|
Рубины | 43 | 51 | 79 |
Изумруды | 28 | 34 | 48 |
Сапфиры | 29 | 57 | 36 |
В данном примере также устанавливается цвет фона для ячеек заголовка (тег
Как вариант, можно вообще убрать рамку вокруг таблицы, оставив только линии внутри нее (рис. 2).
При этом удобнее всего будет не убрать рамку, а спрятать ее, задав ей цвет, совпадающий с цветом фона веб-страницы. Так, в примере 2 фон страницы задан белым и такого же цвета используется граница, которая добавляется к селектору TABLE .
Пример 2. Таблица без внешней рамки
2004 | 2005 | 2006 | |
---|---|---|---|
Рубины | 43 | 51 | 79 |
Изумруды | 28 | 34 | 48 |
Сапфиры | 29 | 57 | 36 |
В данном примере толщина линий между ячейками составляет один пиксел, а белая рамка вокруг — два пиксела, т.е. на один пиксел больше. Это требуется для того, чтобы надежно скрыть внешнюю границу вокруг таблицы.
Табличные данные - информация, которую можно отобразить в виде таблицы и логически разделить по столбцам и строкам. Для отображения табличных данных на веб-страницах используется HTML тег
или | . Именно ячейки содержат весь контент таблицы, отображаемый на веб-странице.
Рамка таблицыПо умолчанию HTML таблица на веб-странице отображается без рамки, для добавления рамки к таблице, как и ко всем другим элементам, используется CSS свойство border . Но стоит обратить внимание на то, что если добавить рамку только к элементу
Если два предыдущих варианта выводят
на экран в разных броузерах рамки,
хоть и минимально, но разной толщины,
то третий пример интерпретируется распространёнными
броузерами Internet Explorer 4.x/5.x/6, Netscape 4.x/6.x и
Opera 6.x одинаково, что касается толщины
рамки. Считаю уместным упомянуть, что
больше всего проблем доставляет веб-дизайнеру
Netscape 4.x.
Все клетки, кроме 5ой, закрашиваются чёрным цветом, пятая - белым. Фон самой таблицы в данном случае не важен. Затем к клеткам 1-3 и 7-9 добавлятся параметр height="1". Соответственно клетки 1, 3, 4, 6, 7, 9 делаются шириной в один пиксел (width="1" ). Средние клетки 2, 5, 8 делаются максимально широкими (width="100%" ). Фокус заключается в том, что в клетки, которые должны быть узкими или тонкими, или теми и другими, добавляется так называемый "модифицированный квадрат Малевича" - прозрачный gif-файл размером 1х1, иначе желаемый эффект достигнут не будет. Для создания тонкой рамки вокруг таблицы с одной ячейкрй этот вариант является, несомненно, слишком сложным и обьёмным, несмотря на его совместимость со многими браузерами. Он применяется, в основном, для разметки страницы тонкими линиями. Для создания рамок можно также использовать таблицы стилей, но об этом в одном из следующих workshop"ов.
Хотя линии между ячейками позволяют четко отделить одни данные от других, ту же самую функцию выполняет и пустое пространство вокруг текста. А чтобы таблица выделялась на веб-страницы, для нее устанавливают определенный цвет фона. Заголовок при этом допустимо задать другого цвета, как показано на рис. 1. Для изменения цвета фона таблицы используем свойство background , добавляя его к селектору TABLE . Для красоты внизу таблицы рисуем линию с помощью свойства border-bottom (пример 1). Пример 1. Создание таблицы без рамки
Поскольку содержимое тега | исходно выравнивается по центру, то для изменения этой характеристики в данном примере применяется стилевое свойство text-align со значением left . Можно поступить наоборот и задать выравнивание по центру для ячеек |
.
Но содержимое первой колонки с названиями камней лучше оставить выровненным
по левому краю. Чтобы установить для разных колонок различное выравнивание содержимого
рассмотрим два способа.
Первый метод заключается в использовании тега
Атрибут align тега Выравнивание содержимого колонок с помощью тега Второй метод универсальный, работает во всех браузерах и основан на добавлении отдельного класса для определенных ячеек. Создаем стилевой класс, например, с именем jewel и применяем его к ячейкам левой колонки (пример 3). Пример 3. Выравнивание с помощью стилей
В данном примере изменяется цвет фона и способ выравнивания для всех ячеек, где установлен атрибут class="jewel" . Результат примера показан на рис. 2. |
---|