Обучающий урок 1: соэдание стилей для таблиц 307

Когда вы читаете одну из строк в таблице, очень легко сбиться. Необходим хороший

Визуальный ориентир. Если мы добавим границы вокруг ячеек, они визуально

Выделят информацию.

5. Добавьте еще один групповой стиль:

#inventory td. #inventory th

font-size: 1.4em:

border: lpx solid #008575:

Селектор предназначен для форматирования тегов заголовков таблицы ( <th>)

и ячеек ( <td> ), он уменьшает размер шрифта и рисует границу вокруг кажДого

Заголовка и каждой ячейки. Как правило, браузеры помещают пробелы между

Всеми ячейками, поэтому вокруг границ и появляются небольшие промежутки

(рис. 10.10, выделено кружком.). Из-за них вся таблица выглядит какой-то при-

Земистой. Сейчас мы это исправим.

Product Pr1ce Rattnв

Vltae Q!Jam Lorem $19.95 *****

ln Tempus VeLtt $14.55 ***

Lorem lpsum DoLor Sat qnceLess ***** -·

Quts FeLts FrlngtLLa 29.95 **

Nunc Sem Pharetra S75.99 ***

VeL Faucibus ELtt r $82.00 * ~ :::·~~- ___ -: ·_-_-:_-_ ---~·.:-_-_ .:-_- :::. :-_ -_ - ,;.-__ у--

• Non Adtptsctnв Vltae $1.95 **** .

Aenean Ord Ante $17.95 ****

Venenatls Non Adtptsdn& $44.00 *****

Product Prtce Rattnв

Vltae Quam Lorem $19.95 *****

ln Tempus VeLtt $14.55 ***

Lorem lpsum DoLor Sat Prlceless *****

Quls Fells FrlngtLLa $29.95 **

Nunc Sem Pharetra S75.99 ***

VeL Faudbus ELtt $82.00 * --- -------

l-~~~-~·~·~-~-~~t~ $1.95 **** - ----------··

Aenean Orci Ante $17.95 **** -- -·

, Venenatls Non Adiplsctnв $44.00 *****

Рис. 10.1 О. Стандартное отображение таблицы в брауэере с пробелами между ячейками (вверху).

На месте их соприкосновения граница удваивается. С помощью свойства border-collapse