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

Горизонтальные и вертикальные границы в таблице 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>

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

Домашнее задание
Для просмотра нужно войти на сайт.
Или получить доступ прямо сейчас:


Нажимая эту кнопку
Вы принимаете политику конфиденциальности

КОММЕНТАРИИ

 doubledonea 2017-04-02 20:21:29
+1

Здравствуйте. Т.к. с прошлого урока началась работа с css, я css код сразу начал писать в файл, чтобы не загромождать html.
Я сделал 2 таблицы на одной странице: одна из прошлого урока, вторая из этого. Проблема в том, что свойства, указанные для td применяются сразу для обеих таблиц. Проблему со свойствами всей таблицы в целом я решил, указав для второй таблицы id. А вот как с td сделать я не знаю. Ну т.е. я могу для каждой ячейки прописать id, но понятно что это некорректно будет)

Ответить
  •  ivashkevich 2017-04-02 20:29:32
    0

    Приветствую, для этого в CSS можно использовать следующую конструкцию:

    #idOfTable td {
        тут стили для ячеек;
    }

    Таким образом​, стили применятся для всех td внутри элемента с идентификатором idOfTable.

    Молодец, что выходите за рамки предоставленного материала! Желаю удачи в прохождении курса)

    Ответить
 doubledonea 2017-04-02 20:27:12
0

Вот код

        <table>
            <caption>Таблица коэффициентов</caption>
            <tr>
                <td rowspan="2">Многочлен</td>
                <td colspan="3">Значения коэффициентов</td>
            </tr>
            <tr>
                <td>a</td>
                <td>b</td>
                <td>c</td>
            </tr>
            <tr>
                <td>ax<sup>2</sup>+bx+c</td>
                <td>4</td>
                <td>18</td>
                <td>9</td>
            </tr>
        </table>
    <table id="menu">
        <tr>
            <td>Главная</td>
            <td>Категории товаров</td>
            <td>Заказать</td>
            <td>О нас</td>
            <td>Контакты</td>
        </tr>
    </table>
table {
    border: solid 2px blue;
    border-collapse: collapse;
    margin: auto;
}
td {
    border: solid 1px green;
    text-align: center;
}   
#menu {
    border: solid 4px green;
    border-collapse: collapse;
    margin: auto;

Ответить
Чтобы написать комментарий нужно войти на сайт.
Или получить доступ прямо сейчас:


Нажимая эту кнопку
Вы принимаете политику конфиденциальности