Горизонтальные и вертикальные границы

Горизонтальные и вертикальные границы в таблице HTML

Бывают ситуации, когда необходимо задать частичное отображение границ ячеек в таблице. Чтобы таблица визуально выглядела, как расчерченная по горизонтали, необходимо обеспечить отображение нижней границы ячеек. А если сделать так, чтобы видны были лишь боковые границы, таблица получается исключительно из столбцов.

В этом ничего сложного нет и добиться таких эффектов можно при помощи все того же CSS, используя такие свойства как: border-top, border-right, border-bottom, border-left.

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

Пример:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Пример таблицы</title>
    <style>
        table {
            border: 0;
            border-collapse: collapse;
        }

        td {
            border-bottom: solid 1px blue;
        }
    </style>
</head>
<body>
<table>
    <tr>
        <td>Верхняя левая ячейка</td>
        <td>Верхняя правая ячейка</td>
    </tr>
    <tr>
        <td>Нижняя левая ячейка</td>
        <td>Нижняя правая ячейка</td>
    </tr>
</table>
</body>
</html>

Результат в браузере:
Таблица с только нижними границами

Присоединяйтесь к нам в Twitter, ВКонтакте, Facebook и Google+, а также вступайте в наш чат в Telegram, чтобы не пропустить новые уроки и быть в курсе последних новостей из мира веб-разработки.
Домашнее задание

  • Попробуйте сделать пару таблиц, которые будут иметь лишь горизонтальные или вертикальные линии, и посмотрите на результат.