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


doubledonea 03.04.2017 в 19:17

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

ivashkevich 03.04.2017 в 19:30

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

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

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

Lex 08.12.2018 в 12:26

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

ivashkevich 09.12.2018 в 01:03

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

Lex 09.12.2018 в 12:08

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

ivashkevich 09.12.2018 в 23:44

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

Lungren 06.03.2018 в 23:47

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

Lungren 08.03.2018 в 13:08

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

ivashkevich 08.03.2018 в 13:51

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

Lungren 08.03.2018 в 15:35
<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 08.03.2018 в 16:14

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

    </tr>
    <tr>
Lungren 08.03.2018 в 16:35

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

ivashkevich 08.03.2018 в 17:03

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

Dilik 11.08.2018 в 11:47

Сразу оговорюсь что я весь курс делаю на одной странице, чтоб копировать нужные куски которые использовались ранее)
Пытаюсь в таблице с акцизами сделать чтобы в ячейке "Дизельное топливо" текст был вверху справа.
Задал класс ячейке 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 12.08.2018 в 06:03

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

.specTD {
    vertical-align: top;
    text-align: right;
}
alsvis2013 20.08.2018 в 13:18

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

ivashkevich 20.08.2018 в 23:17

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

kekspeks 06.02.2019 в 15:30

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

ivashkevich 07.02.2019 в 13:06

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

classic17071999@mail.ru 20.02.2019 в 02:28

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

ivashkevich 20.02.2019 в 21:09

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

Veronika 05.08.2019 в 15:37
<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 06.08.2019 в 20:11

Отлично

vadimche2008@gmail.com 23.08.2019 в 12:18
<!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 25.08.2019 в 12:42
<td{
    vertical-align: bottom;
    text-align: right;
}/td>

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

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

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

morethanhyper@gmail.com 11.10.2019 в 15:29

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

ivashkevich 11.10.2019 в 21:16

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

sshurdakov@gmail.com 27.10.2019 в 20:20
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Пример таблицы</title>
    <style>
     table
     {
        border: solid 2px blue;
    border-collapse: collapse;
    border-spacing: 10px;
     caption-side: left;
}
   table caption {
            text-align: center;
        }
td, th {
    border: solid 2px blue;    
    padding-top: 10px;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
     vertical-align: top;
    text-align: center;
}
th {
    border: solid 2px blue;    

}
</style>
</head>
<body>
<table>
<caption>Размер акцизного сбора на дизельное топливо</caption>
    <tr>
        <th rowspan="2">Продукция</th>
        <th colspan="3">Налоговая ставка</th>
    </tr>
    <tr>
    <th>с 01.01. по 31.05.2015</th>
    <th>с 01.01. по 31.05.2015</th>
    <th>с 31.01.2015</th>
    </tr>
    <tr>
        <th>Дизельное топливо</th>
        <td>3450 руб. за 1 тонну</td>
        <td>4150 руб. за 1 тонну</td>
        <td>3950 руб. за 1 тонну</td>
        </tr>
</table>
</body>
</html>
ivashkevich 27.10.2019 в 20:39

Отлично

Vika 12.11.2019 в 18:42
<!DOCTYPE html>
<html>
 <head>
   <meta charset="utf-8">
   <title>Таблицы</title>
   <style>
     table{
     border: solid 1px blue; 
     border-collapse: collapse;
     border-spacing: 10px;
     caption-side: top;
     }
        caption{
     text-align: right;
     }
        td{
     border: solid 1px blue;
     padding: 10px;
     text-align: center;
     vertical-align: top;
     }
      </style>
 </head>
 <body>
  <h1>Таблицы</h1>
 <table>
 <caption>Таблица</caption>
  <tr><th>Заголовок</th><td colspan="2" rowspan="2"> Ячейка </td><td> Ячейка </td></tr>
  <tr><th>Заголовок</th><td colspan="2"> Ячейка </td></tr>
  <tr><th>Заголовок</th><td> Ячейка </td><td> Ячейка </td><td> Ячейка </td></tr>
 </table>
 </head>
</html>
ivashkevich 12.11.2019 в 19:49

Отлично

Логические задачи с собеседований