Таблицы

border

border - граница (рамка) ячеек или таблицы.

Например. Изменим файл index.html:

<table class="border-table">
    <tr>
        <td>Ячейка 1</td>
        <td>Ячейка 2</td>
    </tr>
</table>

Изменим файл styles.css:

.border-table {
    border: 1px solid #333; /* толщина границы, стиль, цвет */
}

.border-table td {
    border: 1px solid #999;
}

border-collapse

border-collapse - настройка наложения границ.

Например. Изменим файл index.html:

<table class="collapse-table">
    <tr>
        <td>Ячейка 1</td>
        <td>Ячейка 2</td>
    </tr>
</table>

Изменим файл styles.css:

.collapse-table {
    border: 1px solid #333;
    border-collapse: collapse;
}

.collapse-table td {
    border: 1px solid #999;
}

border-spacing

border-spacing - задаёт расстояние между ячейками таблицы.

Например. Изменим файл index.html:

<table class="spacing-table">
    <tr>
        <td>Ячейка 1</td>
        <td>Ячейка 2</td>
    </tr>
    <tr>
        <td>Ячейка 3</td>
        <td>Ячейка 4</td>
    </tr>
</table>

Изменим файл styles.css:

.spacing-table {
    border: 1px solid #333;
    border-spacing: 10px 20px;
    border-collapse: separate;
}

.spacing-table td {
    border: 1px solid #666;
}

vertical-align

vertical-align - вертикальное выравнивание текста в ячейке.

Например. Изменим файл index.html:

<table>
    <tr>
        <td class="align-top">Сверху</td>
        <td class="align-center">По центру</td>
        <td class="align-bottom">Снизу</td>
    </tr>
</table>

Изменим файл styles.css:

table {
    height: 100px;
    width: 300px;
    border-collapse: collapse;
}

td {
    border: 1px solid black;
}

.align-top {
    text-align: left;
    vertical-align: top;
}

.align-center {
    text-align: center;
    vertical-align: middle;
}

.align-bottom {
    text-align: right;
    vertical-align: bottom;
}

empty-cells

empty-cells - отображение пустых ячеек.

Например. Изменим файл index.html:

<table>
    <tr>
        <td>Заполнено</td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td>Заполнено</td>
    </tr>
</table>

<br />

<table class="empty-cells-table">
    <tr>
        <td>Заполнено</td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td>Заполнено</td>
    </tr>
</table>

Изменим файл styles.css:

table {
    border: 1px solid silver;
}

td {
    border: 1px solid black;
}

.empty-cells-table {
    empty-cells: hide;
}