X
Юрий Немец

Урок 14. Таблицы


Здравствуй, уважаемый читатель.

Это четырнадцатый урок изучения CSS. В это уроке вы узнаете как оформлять таблицы и как работать с отдельными элементами таблицы.


Перед изучением данного урока пройдите предыдущие уроки:


Урок 1. Что такое CSS?
Урок 2. Базовые селекторы
Урок 3. Групповые селекторы и селекторы потомков
Урок 4. Псевдоселекторы ссылок
Урок 5. Шрифты
Урок 6. Оформление текста
Урок 7. Рамки
Урок 8. Оформление списков
Урок 9. Наследование
Урок 10. Блочная модель
Урок 11. Высота и ширина блока
Урок 12. Конфликты полей
Урок 13. Работа с изображениями. Часть 1
Урок 13. Работа с изображениями. Часть 2

Теория и практика

Как вы уже помните таблица строится в html с помощью тегов <table>, <tr> и <td>(И при необходимости <th>).

Оформление таблицы

Для того чтобы задать свойство для элемента нам необходим селектор. Этим селектором могут выступать такие теги как table, tr, td, th, так и всевозможные раннее изученные селекторы class и id. Рассмотрим на примере:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

<html>
<head>
    <title>Главная</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div id="content">
        <table>
            <tr>
                <td>iaculis</td>
                <td>adipiscing</td>
                <td>pretium</td>
                <td>egestas</td>
            </tr>
            <tr>
                <td>placerat</td>
                <td>luctus</td>
                <td>tristique</td>
                <td>dignissim</td>
            </tr>
            <tr>
                <td>dictum</td>
                <td>tincidunt</td>
                <td>velit</td>
                <td>mauris</td>
            </tr>
        </table>
    </div>
</body>
</html>

А сейчас придадим какое-нибудь оформление нашей таблице в CSS:

1
2
3
4
5
6
7
8
9
10
11
12

table{
    border-collapse:collapse; /* убираем двойную границу между ячейками */
}
 
td, th{
    padding:10px; /* внутренние отступы для тега заголовка(th) таблицы и ячейки(td) в 10 пикселей(px) */
    border:1px solid #cccccc; /* серая граница для тега заголовка и ячейки */
}
 
th{
    background-color:#C1D3FF; /* голубой цвет фона заголовка(th) */
}
Как таблица выглядела до применения свойств и после:

Здесь вы наверное заметили новое свойство border-collapse. Оно отвечает за вид границы ячейки. Если его не задавать значению collapse вы увидите двойную рамку между ячейками. А таблица с одной рамкой между ячейками имеет более приятный вид, но вы можете убрать данное свойство и посмотреть что получится.

Все ячейки(td) могут иметь как ширину, так и высоту, которые мы задавали через свойства width(ширина) и height(высота). То есть таблица это обычный контейнер похожий на <div>. Но дело в том, что блок <div> более гибкий. Хотя раньше страницы верстались с помощью таблиц, но данная технология давно устарела и не используется. Но я помню как свой первый сайт верстал именно на таблицах :).

Успехов вам в освоении таблиц!

Больше практикуйтесь!

Предыдущий урок
Следующий урок
Категории: Основы CSS