Чат Telegram
Группа ВКонтакте
Новый комментарий


doubledonea

Свойства padding-top/bottom/right/left и text-align/veltical-align конфликтуют между собой?

ivashkevich

Дело в том, что первые отвечают за внутренние отступы, а вторые - за расположение текста внутри ячеек. Таким образом, возможна ситуация, когда вы задали отступы и текст теперь не выравнивается с помощью text-align/veltical-align, так как текст внутри ячеек отдалён от границ заданными отступами. Если вы увеличите при этом высоту или ширину ячеек, чтобы появилось свободное пространство, то текст будет выровнен.
Пример:

<td style="padding-top:10px;padding-bottom:10px;height:50px;vertical-align:bottom">содержимое</td>
doubledonea

Ну я так и думал, что в таком случае нужно оперировать свойствами width и height. Спасибо за ответ)

Lex

Здравствуйте. Правильно я понял - в этой строке у вас описка? Пропущено слово padding перед height

ivashkevich

Привет. Нет, height - это высота ячейки.

Lex

Понял. Большое спс за оперативный ответ! Хороший курс, уже заканчиваю ;) Еще бы css+js для логического продолжения ;)

ivashkevich

У меня обучение бэкендеров =) Если хотите во фронт, вам нужны другие порталы

Lungren

Сделал таблицу акцизного сбора как у вас, но её нижняя граница во многих браузерах слишком широка стала почему-то, так до сих пор и не разобрался, в чём дело?

Lungren

Артём, почему молчите? Я у вас учусь, вас уважаю. А проблема с таблицей действительно актуальна.

ivashkevich

Здравствуйте, прошу прощения за долгий ответ. Напишите в комментариях свой код, посмотрим.

Lungren
<html>
<head>
<title>Пишем на HTML</title>
    <style>
        td{align:center; vertical-align:middle; text-align:center;}
    </style>
</head>
<body>
<table align="center" width="700" height="150" border="1">
<caption>Размер акцизного сбора на дизельное топливо.</caption>
    <tr>
        <th rowspan="2">Продукция</th>
        <th colspan="3">Налоговая ставка</th>
    </tr>
    <tr>
        <th>с 01.01 по 31.12.2015</th>
        <th>c 01.01 по 31.12.2016</th>
        <th>с 01.01.2015</th>
    </tr>
    <tr>
        <th>Дизельное топливо.</th>
        <th>3450 руб. за тонну</th>
        <th>4159 руб. за тонну</th>
        <th>3950 руб за тонну</th>
    </tr>
    <tr>
</table>
</body>
</html>
ivashkevich

У вас в конце просто лишняя пустая строка, перед закрывающим тегом </table>:

    </tr>
    <tr>
Lungren

Да, действительно. Вот какие мелочи бывают важны.)

ivashkevich

В разработке всё состоит из мелочей, удачи в прохождении курса)

Dilik

Сразу оговорюсь что я весь курс делаю на одной странице, чтоб копировать нужные куски которые использовались ранее)
Пытаюсь в таблице с акцизами сделать чтобы в ячейке "Дизельное топливо" текст был вверху справа.
Задал класс ячейке specTD и задал внутри тега style вверху справа. Но не получается. Скажите пожалуйста где моя ошибка.

<style>
        table {
            border: solid 1px blue;
            border-collapse: collapse;
            caption-side: top;
        }

        table caption {
            text-align: top;
        }

        td {
            border: solid 1px blue;
            padding: 5px;
            vertical-align: center;
    text-align: center;
        }
         th {
            border: solid 1px blue;
            padding: 5px;
        }
        specTD {
    vertical-align: top;
    text-align: right;
    }
    </style>

а в самой ячейке так

<tr>
        <th  class="specTD">Дизельное топливо</th><td>3450 руб. за 1 тонну</td><td>4150 руб. за 1 тонну</td><td>3950 руб. за 1 тонну</td>
    </tr>
ivashkevich

Привет, в CSS описание для класса нужно начинать с точки перед именем класса:

.specTD {
    vertical-align: top;
    text-align: right;
}
alsvis2013

А не проще задать центровку текста в таблице в CSS свойствах для всей таблицы:
table {
...
text-align: center;
}

ivashkevich

Ну тут уж зависит от того, что вам нужно)

kekspeks

Артем, я правильно поняла: айди дается конкретному блоку(?), a классов может быть много и стили будут применяться ко всем блокам, имеющим такой класс?
то есть <table class="123q">...</table> может быть хоть 20 со стилем, прописанным через .123q {}, а <table id="123w">...</table> только 1 через #123w {}
(и имеется ли значение . или # ?)

ivashkevich

Да. id задаётся только одному блоку на странице, он должен быть уникальным. Точка для классов, решетка для айдишников.

classic17071999@mail.ru

А можно class="..." указывать не только в теги <td> но и в <th> ?

ivashkevich

Да. К любому тегу можно. Главное следить, чтобы свойства этого класса были применимы к тегу.

Veronika
<style>
        table {border: solid 1px blue; border-collapse: separate; caption-side: top;}
        table caption {text-align: center;}
        td {border: solid 1px blue; vertical-align: top; text-align: center;}
    </style>
ivashkevich

Отлично

vadimche2008@gmail.com
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
<table border="1">
    <caption>Размер акцизного сбора на дизельное топливо</caption>
    <tr>
        <th rowspan="2">Продукция</th>
        <th colspan="3">Налоговая ставка</th>
    </tr>
    <tr>
        <th>c 01.01 по 31.01.2015</th>
        <th>c 01.01 по 31.01.2016</th>
        <th>c 01.01.2015</th>
    </tr>
    <tr>
        <th>Дизельное топливо</th>
        <td>3450 руб. за 1 тонну</td>
        <td>4150 руб. за 1 тонну</td>
        <td>3950 руб. за 1 тонну</td>
</table>
<td{
    vertical-align: bottom;
    text-align: right;
}/td>
<body>
ivashkevich
<td{
    vertical-align: bottom;
    text-align: right;
}/td>

Так нельзя. Делайте как в уроках. Еще помимо этого у странички отсутствует title.

<head>
<style>
td {
    vertical-align: bottom;
    text-align: right;
}
</style>
...
</head>
<body>
...
Тут уже таблица.
vadimche2008@gmail.com

спасибо я понял

morethanhyper@gmail.com

То есть класс позволяет в принципе создать и применить любые необходимые свойства для конкретной ячейки?Как специальные настройки

ivashkevich

Не только для ячейки. Вообще для любого элемента.

Самый понятный курс PHP
Онлайн-уроки в удобное время!
Начать бесплатно
Логические задачи с собеседований