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


doubledonea 02.04.2017 в 20:21

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

ivashkevich 02.04.2017 в 20:29

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

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

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

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

doubledonea 02.04.2017 в 21:46

Спасибо за помощь!)

doubledonea 02.04.2017 в 20:27

Вот код

        <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;
ImmortalPsych 07.07.2018 в 19:41

А что, если здесь не писать border=0 ?

table {
            border: 0;
            border-collapse: collapse;
        }

Я проверил, всё так же. Зачем нам лишние строки, которые ничего не меняют, если нам надо максимально грамотно и чётко писать (ведь нам самим потом в этом копаться) :)
Или всё же это надо прописывать...?

ivashkevich 08.07.2018 в 11:10

Необязательно, я уже и не помню, для чего я так написал) Возможно, в разных браузерах по-разному будет отображаться если явно не задать.

ReyJiz 07.12.2018 в 19:02
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #table1 {
            border-collapse: collapse;
        }

        #table1 td {
            border-right: solid 2px;
            padding: 5px;
        }

        #table2 {
            border: 1px;
        }

        #table2 td {
            border: 1px green;
            border-bottom: solid 1px black;
            padding: 5px;
        }
    </style>
</head>

<body>
    <table id="table1" align="center">
        <tr>
            <td>Верхняя левая ячейка</td>
            <td>Верхняя правая ячейка</td>
        </tr>
        <tr>
            <td>Средняя левая ячейка</td>
            <td>Средняя правая ячейка</td>
        </tr>
        <tr>
            <td>Нижняя левая ячейка</td>
            <td>Нижняя правая ячейка</td>
        </tr>
    </table>

    <br>

    <table id="table2" align="center">
        <tr>
            <td>Средняя левая ячейка</td>
            <td>Средняя левая ячейка</td>

        </tr>
        <tr>
            <td>Средняя левая ячейка</td>
            <td>Средняя левая ячейка</td>
        </tr>
        <tr>
            <td>Средняя левая ячейка</td>
            <td>Средняя левая ячейка</td>
        </tr>
    </table>

</body>

</html>
ivashkevich 09.12.2018 в 01:11

Отлично

Veronika 06.08.2019 в 14:45
<style>
        table {border: 0; border-collapse: collapse;}
        td {border-right: solid 1px blue; border-left: solid 1px blue;}
    </style>
ivashkevich 06.08.2019 в 20:20

Отлично

sshurdakov@gmail.com 22.10.2019 в 23:43
<style>

       table {
            border: 1;
            border-collapse: collapse;
        }

        td {
            border-left: solid 5px green;
        }

            </Style>
</head>

и

<style>

       table {
            border: 1;
            border-collapse: collapse;
        }

        td {
            border-right: solid 5px green;
        }

            </Style>
</head>
ivashkevich 23.10.2019 в 09:02

Отлично. Опять же, теги пишутся маленькими буквами.

Vika 10.11.2019 в 21:25
<!DOCTYPE html>
<html>
 <head>
   <meta charset="utf-8">
   <title>Таблица</title>
   <style>
     #Qwe{
     border: solid 0px green; 
     border-collapse: collapse;}
     #Qwe td{
     border-right: solid 4px green;
     }
     #Asd { 
     border-collapse: collapse
     }
     #Asd td{
     border-bottom: solid 3px red;
     }
     #Zxc1 {
     border-collapse: collapse;
     }
     #Zxc1 td{
     border-left: dotted 5px purple;
     }
   </style>
 </head>
 <body>
  <h2 align="center"> Таблица</h2>
  <table id="Qwe">
   <tr><td> 1 </td><td> 2 </td><td> 3 </td></tr>
   <tr><td> 1 </td><td> 2 </td><td> 3 </td></tr>
   <tr><td> 1 </td><td> 2 </td><td> 3 </td></tr>
  </table>
  <table id="Asd">
   <tr><td> 1 </td><td> 2 </td><td> 3 </td></tr>
   <tr><td> 1 </td><td> 2 </td><td> 3 </td></tr>
   <tr><td> 1 </td><td> 2 </td><td> 3 </td></tr>
  </table>
  <table id="Zxc1">
   <tr><td> 1 </td><td> 2 </td><td> 3 </td></tr>
   <tr><td> 1 </td><td> 2 </td><td> 3 </td></tr>
   <tr><td> 1 </td><td> 2 </td><td> 3 </td></tr>
  </table>
 </body>
</html>
ivashkevich 11.11.2019 в 19:35

Отлично. Обычно идентификаторы пишутся с маленькой буквы

eNergy 05.01.2020 в 10:46
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Пример таблицы</title>
    <style>
        table {
            border: 0;
            border-collapse: collapse;
        }
        td {
            /*border-bottom: dotted 1px blue;*/
            border-right: dotted 1px blue;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <td>1</td>
            <td>1.1</td>
        </tr>
        <tr>
            <td>2</td>
            <td>2.1</td>
        </tr>
        <tr>
            <td>3</td>
            <td>3.1</td>
        </tr>
    </table>
</body>
</html>

Попробовал убрать стили для table, все работает, но шрифт стал крупнее.

ivashkevich 06.01.2020 в 16:26

Отлично

vitalik 22.01.2020 в 21:42
<!DOCTYPE html>
<html>
<head>
     <meta charset="utf-8">
     <title>Таблица в html</title>
     <style>
         #table1 { 
             border: solid 0px green;
             border-collapse: collapse;
         }   
         #table1 td {
             border-top: solid 5px green;
         }
         #table2 { border-collapse: collapse; 
         }
         #table2 td { border-right: solid 3px red; 
         }
         #table3 { border-collapse: collapse; 
         }
         #table3 td { border-bottom: solid 4px blue; 
         }
         #table4 { border-collapse: collapse; 
         }
         #table4 td { border-left: solid 2px purple; 
         }       
     </style>
</head>
<body>
     <table id="table1">
         <tr>
             <td>вверх лево</td>
             <td>вверх право</td>
         </tr>
         <tr>
             <td>середина лево</td>
             <td>середина право</td>
         </tr>
         <tr>
             <td>низ лево</td>
             <td>низ право</td>
         </tr>
     </table>
     <table id="table2">
         <tr>
             <td>вверх лево</td><td>вверх право</td>
         </tr>
         <tr>
             <td>середина лево</td><td>середина право</td>
         </tr>
         <tr>
             <td>низ лево</td><td>низ право</td>
         </tr>
     </table>
     <table id="table3">
         <tr>
             <td>вверх лево</td><td>вверх право</td>
         </tr>
         <tr>
             <td>середина лево</td><td>середина право</td>
         </tr>
         <tr>
             <td>низ лево</td><td>низ право</td>
         </tr>
     </table>
     <table id="table4">
         <tr>
             <td>вверх лево</td><td>вверх право</td>
         </tr>
         <tr>
             <td>середина лево</td><td>середина право</td>
         </tr>
         <tr>
             <td>низ лево</td><td>низ право</td>
         </tr>
     </table>
</body>
</html>
ivashkevich 24.01.2020 в 08:24

Отлично

MelManwe 30.01.2020 в 18:20

горизонтальные - зелёные, вертикальные - красные)

<!DOCTYPE=html>
<html>
<head>
<meta charset="utf-8">
<title>пример таблицы</title>
<style>
table {border:0;
border-collapse: collapse}
td {border-top:solid 2px green;}
td {border-bottom:solid 2px green;}
td {border-right:solid 2px red;}
td {border-left:solid 2px red;}
</style>
</head>
<body>
<table>
<tr><td>первая ячейка</td><td>вторая ячейка</td></tr>
<tr><td>третья ячейка</td><td>четвертая ячейка</td></tr>
<tr><td>пятая ячейка</td><td>шестая ячейка</td></tr>
</table>
</body>
</html>
ivashkevich 31.01.2020 в 13:22

Отлично

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