Таблицы

Лабораторная работа №4

Тема «Дизайн Web-страниц c помощью CSS»

Цель:

1) научиться использовать свойства стилей для дизайна и верстки Web-страниц

2) выработать навык эстетического оформления web-документа.

Теоретическая часть

CSS-свойства: оформление таблиц

Таблицы

Свойства CSS могут применяться к таблицам, их строкам и ячейкам для задания свойств текста и шрифта, управления фоном, полями, границами, размерами и т.п.

Создадим таблицу и применим к ней CSS -стили. В таблицу внесем данные о популярности различных браузеров. Для заголовка таблицы используем

тег <th>...</th>.

HTML-код:

<html>

<head>

<title>Популярность браузеров в Mиpe</title>

</head>

<body>

<table>

<tr>

<th>rofl\Bpaysep</th> <th>IE</th> <th>Firefox</th> <th>Safari</th> <th>Opera</th> </tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

Без CSS-оформления таблица будет выглядеть так:

Год\Браузер IE Firefox Safari Opera

2010 61.43% 24.40% 4.55% 2.37%

2009 69.13% 22.67% 3.58% 2.18%

2008 77.83% 16.86% 2.65% 1.84%

2007 79.38% 14.35% 4.70% 0.50%

По умолчанию содержимое заголовочных ячеек отображается жирным шрифтом с выравниванием по центру.

Добавим в тег <head>...</head> тег <style>...</style>, а к тегу <table>...</table> атрибут id="browser_stats". Запишем CSS-правила для таблицы. Для заголовочных ячеек установим серый фон и отступ содержимого от границ (padding) в половину высоты строки, для ячеек с данными - выравнивание по правому краю и padding три десятых от высоты строки. Вокруг таблицы зададим двойную рамку, а для ячеек - обычную одинарную.

<style>

/* стиль таблицы */

TABLE#browser_stats {

border: Зрх double black; }

/* стиль заголовочных ячеек */

TABLE#browser_stats

TH{

border: 1px solid black;

background-color: gray;

padding: 0.5em; }

/* стиль ячеек с данными */

TABLE#browser_stats

TD{

border: 1px solid black;

padding: 0.3em;

text-align: right; }

</style>

В браузере:

Рисунок 1. Отображение таблицы с заданными CSS-стилями

Виден существенный недостаток: у каждой ячейки появилась собственная рамка. Чтобы этого не происходило, необходимо указать в правилах для таблицы свойство border-collapse со значением collapse.

Рисунок 2. Эффект слияния границ соседних ячеек

Теперь применим к той же таблице другое форматирование. Разделим таблицу двумя линиями на 3 части: названия браузеров, годы и процентные данные. Названия браузеров и процентные доли выровняем по центру, годы - по правому краю. Зададим одинаковую ширину для столбцов с информацией по браузерам.

Рисунок 3 Оформление таблицы с двумя разделительными линиями

Чтобы применить правила CSS к левой колонке (годы), нам придется задать новый класс 1с и прописать атрибут class="lc" вовсе ячейки левой колонки.

Горизонтальная линия создается путем указания свойства border-bottom для ячеек тн, вертикальная - border-left для ячеек класса 1с

Код-страницы:

<html>

<head>

<title>Популярность браузеров в Mиpe</title>

<style>

TABLE#browser_stats {

border-collapse: collapse;

}

TABLE#browser_stats TH{ border-bottom: 1px solid black; }

TABLE#browser_stats TD{ padding: 0.3em; text-align: center; width: 7 0px; }

TABLE#browser_stats .lc{ text-align: right; border-right: 1px solid black; width: 100px; }

</style> </head> <body>

<th class="lc">rofl\Bpaysep</th>

<th>Firefox</th>

<th>Safari</th>

<th>Opera</th> </tr> <tr>

</tr>

</table>

</body>

</html>