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


Mary 26.05.2017 в 17:32

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

trialex3 06.08.2017 в 01:10

Но можно не добавлять в стайл .rowGreen {background-color:green;}. Можно просто вписать это в <tr>
что бы получалось <tr style="background-color: yellow" ...... </tr>

1111 27.04.2018 в 01:06

Артем, не пойму, почему не работает rowGreen(спать пора)). И, откуда ты берешь эти названия: rowGreen, specialTd??

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>table6-test</title>
</head>
<body>
<table >
    <style>
        table {
            border: solid 1px green;
            border-collapse: collapse;
            border-spacing: 10px;
            caption-side: top;
        }
        td {
            border: solid 1px green;
            border-left: solid 1px green;
            border-right: solid 1px green;
            border-bottom: solid 1px green;
            border-top: solid 1px green;
            text-align: center;
            padding: 30px;
            padding-bottom: 20px;
            padding-top: 20px;
            padding-right: 20px;
            text-align: center;
            vertical-align: top;
            height:70px;
            width:70;
            background-color: lightgreen;
                              }
        th {
            border: solid 5px green;
            background-color: red;
        }
        .specialTd {
            vertical-align: bottom;
            text-align: right;
               }
        .rowGreen {
            background-color: lawngreen;
        }
    </style>
    <tr>
        <td class="specialTd" rowspan="2"colspan="2">1</td>
        <td>2</td>
    </tr>
    <tr>
        <td>3</td>
    </tr>
    <tr class="rowGreen">
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
   </table>
</body>
</html>

<tr class="rowGreen">

ivashkevich 27.04.2018 в 01:28

Привет. Дело в том, что стили для td перезатирают стили для .rowGreen, так как они по правилам CSS считаются более приоритетными. Можно указать класс .rowGreen для каждой td отдельно, либо сделать так:

.rowGreen td {тут ваши стили}

И тогда это будут стили для всех td, расположенных внутри элемента с классом .rowGreen. Это правило будет уже более приоритетным, чем просто td.

Ну а имена просто придумываются :)

alsvis2013 20.08.2018 в 15:49

Подскажите пожалуйста, как изменить цвет текста для отдельно взятой таблицы, а не для всех сразу?

ivashkevich 20.08.2018 в 23:16

Задать этой таблице какой-то класс и прописать стили для этого класса. Типа такого:
CSS:

.color {
// тут стили
}

HTML:

<table class="color">
alsvis2013 21.08.2018 в 08:36

Спасибо, всё получилось!

mr.niks2007@gmail.com 27.07.2019 в 09:40
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Download minecraft 1.0.0</title>
<style><link href="syle.css rel="stylesheet">
table {
border: solid lpx blue;
border-collapse: collapse; }
    td, th {
border: solid lpx blue;
padding: 10px;
   }
 th {
            background-color: #eeeeee;

</style>
</head>
<body>
<a href="fhile.rar" download>
<a title="Minecraft 1.0.0" href="fhile.rar" >скачать майнкрафт</a><br>
<h3><strong>системные требование:</strong> <br></h3>
<table border="1">
<tr>
    <td style="background-color: greenyellow">512мб(Оперативной памяти)</td><td style="background-color: greenyellow">100мб(свободно на диске)</td>
<tr>
    <td style="background-color: greenyellow">16мб(видеопамяти)</td>          <td style="background-color: greenyellow">Windows xp,2000,7.10(32бит-64бит)</td>
</tr>
</table>
</body>

</html>
ivashkevich 27.07.2019 в 09:51

Отлично

Veronika 05.08.2019 в 19:01
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Всякая всячина</title>
    <meta name="keywords" content="всякая, всячина">
    <meta name="description" content="Кручу, верчу, обмануть всех хочу">
    <style>
        table {border: solid 1px gray; border-collapse: separate; caption-side: top;}
        table caption {text-align: center;}
        td, th {border: solid 1px gray; vertical-align: middle; text-align: center; padding: 10px;}
        .rowGreen {background-color:green;}
    </style>
</head>
<body>
<table style="margin: auto;">
<caption>Таблица</caption>
    <tr>
        <th rowspan="2" colspan="2" style="background-color: greenyellow">1</th>
        <td>2</td>
    </tr>
    <tr>
        <td>3</td>
    </tr>
    <tr class="rowGreen" style="color: white">
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
</table>
ivashkevich 06.08.2019 в 20:15

Отлично

sshurdakov@gmail.com 27.10.2019 в 20:44
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Пример таблицы</title>
    <style>
     table
     {
     color: white;
        border: solid 2px blue;
    border-collapse: collapse;
    border-spacing: 10px;
     caption-side: left;
}
   table caption {
            text-align: left;
        }
td {
    border: solid 2px blue;    
    background-color: red;

}
th {
    border: solid 2px blue;    
    background-color: green;

}

</style>
</head>
<body>
<table>
<tr>
        <th>1</th>  
        <th>2</th>        
        <th>3</th>
    </tr>
    <tr>

        <td>11</td>
        <td>22</td>
        <td>33</td>
    </tr>
    <tr>
        <td>4</td>
        <td>5</td>
         <td>6</td>
    </tr>
</table>
</body>
</html>
ivashkevich 27.10.2019 в 20:45

Отлично

Vika 12.11.2019 в 20:39
<!DOCTYPE html>
<html>
 <head>
   <meta charset="utf-8">
   <title>Таблицы</title>
   <style>
     #qwe  {
     border: solid 3px #000080; 
     border-collapse: collapse;
     border-spacing: 10px;
     caption-side: top;
     background-color: #00ffff;
     color: #000080;
     }
     #qwe  caption {
     text-align: right;
     }
    #qwe td{
     border: solid 1px blue;
     padding: 10px;
     text-align: center;
     vertical-align: top;
     }
     #qwe th{
     border: solid 3px blue;
     patting-left: 20px;
     padding-right: 5px;
     padding-bottom: 15px;
     padding-top: 10px;
     background-color: #4682b4;
     color: #000000
     }

     #asd { 
     border: solid 3px darkred;
     border-collapse: separate;
     border-spacing: 5px;
     caption-side: bottom;
     background-color: #ffdab9;
     color: #8b0000;
     }
     #asd caption {
     text-align: center;
     }
     #asd td{
     border: dotted 3px red;
     padding: 40px;
     padding-bottom: 35px;
     padding-right: 40px;
     padding-left: 10px;
     padding-top: 5px;
     text-align: right;
     vertical-align: bottom;
     }
     #asd th{
     border: solid 3px red;
     padding:40px;
     padding-right: 40px;
     padding-left: 10px;
     padding-bottom: 35px;
     padding-top: 5px;
     background-color: #a52a2a;
     color: #000000;
     }
  </style>
 </head>
 <body>
 <h1>Таблицы</h1>
 <hr>
  <table id="qwe">
 <caption>Таблица</caption>
  <tr><th>Заголовок</th><td style="background-color: #e0ffff" colspan="2" rowspan="2"> Ячейка </td><td style="border-right: solid 3px #000080"> Ячейка </td></tr>
  <tr><th>Заголовок</th><td colspan="2" id="Qwe2"> Ячейка </td></tr>
  <tr><th>Заголовок</th><td> Ячейка </td><td> Ячейка </td><td style="border-right: solid 3px #000080; background-color: #e0ffff"> Ячейка </td></tr>
 </table>
 <br><br>
 <table id="asd">
 <caption>Таблица</caption>
   <tr><th>Заголовок</th><td> 1 </td><td> 2 </td><td> 3 </td></tr>
   <tr><th>Заголовок</th><td> 1 </td><td> 2 </td><td> 3 </td></tr>
   <tr><th>Заголовок</th><td> 1 </td><td> 2 </td><td> 3 </td></tr>
 </table>
 </body>
</html>
ivashkevich 13.11.2019 в 16:44

Отлично

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