Этот урок набрал набрал достаточно большое количество комментариев и дальнейшее его комментирование отключено. Если вы хотели убедиться в правильности выполнения ДЗ или у вас возник вопрос по уроку, посмотрите ранее добавленные комментарии, кликнув по кнопке ниже. Скорее всего вы найдете там то, что искали. Если это не помогло - задайте вопрос в чате в телеграме - https://t.me/php_zone
ImmortalPsych 06.07.2018 в 20:46
<!DOCTYPE=html>
<head>
    <meta charset="utf-8">
    <title>Таблчика</title>
    <meta name="keywords" content="что угодно">
</head>
<body>
<table>
    <tr>    <td></td>               <td>Золото</td>     <td>Серебро</td>        <td>Бронза</td>         <td>Всего</td>      </tr>
    <tr>    <td>Россия</td>         <td>8</td>          <td>15</td>             <td>19</td>             <td>38</td>         </tr>
    <tr>    <td>Белоруссия</td>     <td>6</td>          <td>14</td>             <td>17</td>             <td>33</td>         </tr>
    <tr>    <td>Азербайджан</td>    <td>2</td>          <td>10</td>             <td>19</td>             <td>27</td>         </tr>
</table>
</body>
</html>

Ой чёта изи))

ivashkevich 07.07.2018 в 07:29

Норм))

nastasya95 11.07.2018 в 11:02
<!DOCTYPE html>
<html>
<head>

<meta charset = "utf-8">
<title>table</title>
<meta name ="keywords" content ="sedffffffff, sdfffffffffff, sdfffffffffff, sdfffff">
<meta name ="description" content ="sedffffffff sdfffffffffff sdfffffffffff sdfffff dffffffffff ">

</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 11.07.2018 в 21:37

Отлично!

ReyJiz 07.12.2018 в 18:40
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <table border="1px" 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:10

Супер!

[email protected] 17.02.2019 в 22:08
<table>
    <tr><td>Получатель</td> <td>Сумма</td>  <td>Комиссия</td>   <td>Всего</td></tr>
    <tr><td>ФИО</td><td>1.400$</td><td>5,00$</td><td>1.395$</td></tr>
    <tr><td>ФИО</td><td>2.000$</td><td>2,00$</td><td>1.998$</td></tr>
    <tr><td>ФИО</td><td>1.150$</td><td>9,00$</td><td>1.141$</td></tr>
    <tr><td>ФИО</td><td>2.220$</td><td>6,00$</td><td>2.214$</td></tr>
</table>

Что в голову пришло, то сделал xD

ivashkevich 17.02.2019 в 22:09

Норм табличка

Lynatik0100 20.03.2019 в 15:59
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title> Домашка по таблицам </title>
</head>
<body>
<table>
    <tr>
        <td> 1.1 ячейка</td><td> 1.2 ячейка</td><td> 1.3 ячейка</td>
    </tr>
    <tr>
        <td>2.1 ячейка</td><td>2.2 ячейка</td><td> 2.3 ячейка</td>
    </tr>
    <tr> 
        <td>3.1 ячейка</td><td>3.2 ячейка</td><td> 3.3 ячейка</td>
</table>
</body>
</html>
ivashkevich 20.03.2019 в 21:12

Ок, только нужно было 3*2 =)

Veronika 04.08.2019 в 15:45
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="keywords" content="web, программист, разработчик, junior, html, php, резюме">
        <meta name="description" content="Талантливый начинающий программист, с горящими глазами. С удовольствием приму участие как в проектировании и разработке новых проектов, так и в доработке и совершенствовании существующих">
        <title>Лучший программист Шадрина Вероника</title>
        <link href="style.css" rel="stylesheet"/><!--подключенные внешние стили. находятся в файле style.css-->
    </head>
    <body>
<h1>Шадрина Вероника</h1>
<a href="image.jpg"><img src="image.jpg" width="200"></a>
<h2>Контактная информация</h2>
<table>
    <tr>
        <td>Город</td><td>Ростов-на-Дону</td>
    </tr>
    <tr>
        <td>Телефон</td><td>8-961-444-44-44</td>
    </tr>
    <tr>
        <td>Адрес эл. почты</td><td>[email protected]</td>
    </tr>
</table>
<hr>
<h2>Мои навыки</h2>
<ul>
<li>языки программирования
<ul>
    <li>HTML</li>
    <li>PHP</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>
</li>
<li>программы
<ol>
    <li>notepad++</li>
    <li>Open Server</li>
    <li>PhpStorm</li>
</ol>
</li>
</ul>
<h2>Мой опыт работы</h2>
<a href="experience.html">[можно посмотреть здесь]</a><br>
<a href="experience.html#3">[здесь самый ценный]</a>
<hr>
<h2>Обо мне</h2>
<a title="моя страничка ВК" href="https://vk.com/veronika_shadrina"><img src="vk.png" width="30"></a>
     <script src="scripts.js"></script><!--подключенные внешние скрипты. находятся в файле scripts.js-->
    </body>
</html>
ivashkevich 04.08.2019 в 21:06

Супер!

[email protected] 26.08.2019 в 20:20

Почему три строки не отображаются?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Table</title>
</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 28.08.2019 в 05:40

Какие 3 строки?

[email protected] 22.10.2019 в 23:10
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Пример таблицы</title>
</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 23.10.2019 в 08:59

Супер!

Vika 10.11.2019 в 16:52
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Таблица</title>
 </head>
 <body>
  <h2 align="center"> Таблица</h2>
   <table border="2">
    <tr>
    <td>1 </td>
    <td>2 </td>
   </tr>
   <tr>
    <td> 1</td>
    <td> 2</td>
   </tr>
   <tr>
    <td> 1</td>
    <td> 2</td>
   </tr>
  </table>
 </body>
</html>
ivashkevich 11.11.2019 в 09:13

Отлично

[email protected] 17.12.2019 в 21:58

В одном из видеокурсов по html человек говорил о том, что сейчас таблицы в html не актуальны тк таблицы намного проще создавать в css, человек был прав?

ivashkevich 18.12.2019 в 01:42

Да, в современной вёрстке для создания колонок на сайте действительно используется CSS. Однако таблицы всё равно стоит знать и понимать - они используются на сайте когда нужно вывести именно таблицу с какими-либо данными. Помимо этого таблицы также используются в вёрстке email-сообщений, так как там нет поддержки CSS.

На данном сайте нет полной информации о современной вёрстке, но если вы собираетесь становиться PHP-разработчиком, то оно вам и не надо, достаточно знать лишь основы. В остальном этим должны заниматься frontend-разработчики. Если вам интересно это направление, то вам нужно будет после этого курса самостоятельно найти другой источник информации помимо моего сайта, где будут обучать именно фронтенду.

eNergy 05.01.2020 в 10:23
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Пример таблицы</title>
</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>
ivashkevich 06.01.2020 в 16:26

Отлично

vitalik 22.01.2020 в 20:47
<!DOCTYPE html>
<html>
<head>
     <meta charset="utf-8">
     <title>Таблица в html</title>
</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 24.01.2020 в 08:21

Отлично

MelManwe 30.01.2020 в 18:03
<!DOCTYPE=html>
<html>
<head>
<meta charset="utf-8">
<title>пример таблицы</title>
</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:20

Отлично

Lyubav4ik 02.03.2020 в 01:53
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Моя табличка - буду потом шефу составлять сводную таблицу</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
</head>
<body>
<table width=100%>
    <tr>
        <td>1</td>
        <td>2</td>
    </tr>
    <tr>
        <td>4</td>
        <td>5</td>
    </tr>
        <tr>
        <td>7</td>
        <td>8</td>
    </tr>
</table>
</body>
</html>
ivashkevich 05.03.2020 в 03:10

Отлично

sodancingdeath 08.04.2020 в 17:19
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Характеристики котиков</title>
</head>
<body>
<table>
<tr>
<td><img src="Draco.jpg" ></td><td><img src="Blaize.jpg" ></td>
</tr>
    <tr>
        <td>Драко</td><td>Блейз</td>
    </tr>
    <tr>
        <td>2 годика</td><td>1,5 годика</td>
    </tr>
    <tr>
    <td>белый, пушистый, <br>тупой</td><td>черный, активный, <br>прожорливый</td>
    </tr>
</table>
</body>
</html>

а это и правда не сложно

ivashkevich 08.04.2020 в 19:18

Отлично

Artt 16.04.2020 в 23:29
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Sellers account status</title>
    <style>
        .myTable {
            margin: auto;
        }
        table, td {
            border: 1px solid chocolate;
            font-size: 24pt;
            text-align: center;

        }
        table {
            border-collapse: collapse;
        }
        td {
            padding: 20px;
            color: chocolate;
            width: 20%;
        }
        a {
            color: chocolate;
        }
        hr {
            color: chocolate;
        }
    </style>
</head>
<body>
<table class="myTable">
    <tr class="abc">
        <td style="color: #888888;font-style: italic">Silver Account</td>
        <td style="color: goldenrod;font-style: italic">Gold Account</td>
        <td style="color: #cccccc;font-style: italic">Platinum Account</td>
    </tr>
    <tr>
        <td>50€</td>            <td>75€</td>        <td>100€</td>
    </tr>
    <tr style="height: 300px">
        <td>
            <ul style="text-align: start">
                <li>one</li><li>two</li><li>three</li>
            </ul>
        </td>
        <td>
            <ul style="text-align: start">
                <li>one</li><li>two</li><li>three</li><li>four</li><li>five</li>
            </ul>
        </td>
        <td>
            <ul style="text-align: start">
                <li>one</li><li>two</li><li>three</li><li>four</li><li>five</li><li>six</li><li>seven</li>
            </ul>
        </td>
    </tr>
</table>
    <br>
<hr>    <!--для разделения страницы полосой-->
    <br>
    <a href="index.html">Go back to Start page</a>
    <br>
    <a href="table_test.html">table test</a>
</body>
</html>
ivashkevich 17.04.2020 в 09:17

Отличная табличка, но с опечатками в слове Accaunt

Artt 17.04.2020 в 12:07

Спасибо. Опечатки исправил. Идём дальше.

[email protected] 17.04.2020 в 15:34

Мне кажется, это чтоб оптимизировано было под любые разрешения, в том числе и для мобилок, чтобы на всю ширину растягивалось

ivashkevich 18.04.2020 в 05:25

В следующих уроках узнаете ответ)

Solodalex 20.04.2020 в 23:11
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Моя табличка</title>
        <meta name="keywords" content="">
        <meta name="description" content="">
        <style>
        table, td {
            border: 1px solid #474747;
        }

        table {
            border-collapse: collapse;
        }

        td {
            padding: 20px;
        }

        .myTable {
             margin: auto;
        }
        </style>

    </head>
<body>
    <table class="myTable" width=100%>
        <tr>
            <td>1</td>
            <td colspan="2">2</td>

        </tr>
        <tr>
            <td>3</td>
            <td>4</td>
            <td rowspan="2">7</td>
        </tr>
            <tr>
            <td>5</td>
            <td>6</td>

        </tr>
    </table>
</body>
</html>

Исправил

ivashkevich 21.04.2020 в 06:29

Всё ок, только стили нужно поместить в один тег <style>

sasha31 27.04.2020 в 17:14

Артём, а где описание класса greenYellowBackground ? в блоке style его нет

ivashkevich 27.04.2020 в 20:12

Саша, спасибо за обратную связь. Этот класс на самом деле был лишним. Урок исправил.

[email protected] 15.05.2020 в 23:21
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Пример таблицы</title>
    <style>
    table, td {border: 1px solid blue;
    padding:20px
    }
    table{border-collapse: collapse;}

    .myTable {margin: auto;

            text-align: center;

            width: 100%;}

    </style>
</head>
<body>
<table class= myTable>
    <tr>
        <td rowspan="2">Продукция</td>
        <td colspan="3">Налоговая ставка</td

    </tr>
    <tr>

        <
        <td>c 1.01 по 31.01</td>
        <td>c 1.01 по 31.01</td>
        <td>c 1.01 2015</td>

    </tr>
    <tr>

        <td>Дизельное топливо</td>
        <td>3450 руб.за одну тонну</td>
        <td>4150 руб.за одну тонну</td>
        <td>3950 руб.за одну тонну</td>

    </tr>
</table>
</body>
</html>
ivashkevich 16.05.2020 в 12:17

Проблема с форматированием. Делайте отступы как в уроках.

        <
        <td>c 1.01 по 31.01</td>

Тут ошибка

[email protected] 03.06.2020 в 06:13
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Пример таблицы</title>
    <style>
        table {
            border: 5px dashed red;  /* Параметры границы - толщина, стиль, цвет */
            border-collapse: collapse;  /* Соприкасающиеся границы склеиваются */
        }
        td {
            padding: 35px; /* Поля вокруг текста */
            border: 2px groove blue;
        }
        .myTable {     /* Стили для класса myTable */
            margin: auto;  /* Отступ от края до границы родителя */
            text-align: left; /* Горизонтальное выравнивание текста в пределах элемента */ 

            width: 100%;  /* Ширина границы в % от ширины окна*/
            height: 470px;  /* Абсолютная высота в пикселах */

            background-color: aliceblue;  /* Цвет фона */
        }
        .px30 {   /* Стили класса px30 */
            width: 33%;  
        }
        .px25 { /* Стили класса px25 */  
            width: 10%;
        }

    </style>
</head>
<body>
<table class="myTable"> 
    <tr>
        <td class="px30">Инфа об услуге</td> 
        <td class="px25">Цена услуги</td>
        <td class="px30">Комментарий</td>
    </tr>
    <tr>
        <td>Шью валенки и валяю портянки</td>
        <td>от 50 р. до $50000</td>
        <td>Хорошие портянки дороже хреновых валенок</td>
    </tr>
    <tr>
        <td>Оформить первую строку заголовком не получилось</td>
        <td>Пару часов на стили более чем мало</td>
        <td>Лиха беда начало</td>
    </tr>
</table>
</body>
</html>
ivashkevich 03.06.2020 в 09:07

Отлично

UtillitE 17.06.2020 в 22:05
  <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Пример таблицы</title>
     <style>
         table, td {
            border: 1px solid black;
        }
        table {
            border-collapse: collapse;
        }
         td {
            padding: 20px;
        }
        .myTable {
        margin: auto;
        text-align: center;

            width: 100%;

            background-color: aliceblue;
        }

     </style>
</head>
<body>
<table class="myTable">

 <tr>
      <td rowspan="2">1</td>
        <td colspan="3">2</td>
    </tr>
    <tr>
        <td>3</td>
        <td>4</td>
        <td>5</td>
    </tr>
    <tr>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>1</td>
    </tr>
</table>
</body>
</html>
ivashkevich 18.06.2020 в 09:37

Оформляйте код (в редакторе комментариев самая первая кнопка).
Нажмите на карандашик и поправьте, пожалуйста. А потом ответьте мне на этот комментарий. Проверю домашку после этого.

UtillitE 20.06.2020 в 14:23
 Здравствуйте, исправила!
ivashkevich 21.06.2020 в 08:21

Отлично. Только обычный текст не надо оформлять как код)

YuriyRa 22.06.2020 в 10:37
<!DOCTYPE html>
 <html lang="ru">
  <head>
   <title>Таблицы</title>
   <meta charset="utf-8">
   <meta name="keywords" content=""><!--ключевые слова-->
   <meta name="description" content=""><!--краткое описание страницы отображаемое браузером-->
   <style>
    table {
      width:100%;
      border:3px solid darkblue;
      border-collapse:collapse;
      background-color:yellow;
      }
    td {
      border:2px solid darkblue;
      }
    h1 {
      color:blue;
      }
    h3 {
      text-align:center;
      color:darkgreen;
      }
    .type {
      text-align:center;
      color:darkgreen;
      font-size:15px;
      }
    .text {
      text-indent:20px;
      text-align:center;
      }
    #row {
      width:15%;
      background-color:#FFB6C1;
      color:darkblue;
      }
    #sens {
      text-indent:20px;
      background-color:#FFB6C1;
      font-size:20px;
      color:darkblue;
      }
   </style>
  </head>
  <body>
   <table>
    <caption><h1>Ширина таблицы 100% - назначение</h1></caption>
     <tr>
      <td rowspan="3" class="text" id="row"><b><em>Если ширина таблицы не задана -</br>
                      она определяется браузером</br>
                      автоматически.</em></b>
      </td>
      <td colspan="2"><h3>
                    Единицы измерения ширины таблиц и их применение</h3>
      </td>
     </tr>
     <tr>
      <td class="type"><b>% (проценты)</b>
      </td>
      <td class="type"><b>px (пиксели)</b>
      </td>
     </tr>
     <tr>
      <td class="text">
          Используются для создания "резинового" макета - </br>
          размеры вычисляютться браузером относительно</br>
          окна браузера в процентном соотношении</br>
          указанном в коде.
      </td>
      <td class="text">
          Используються для создания "фиксированного" </br>
          макета - размеры остаются неизменными, независимо</br>
          от размеров окна браузера (исключением может быть</br>
          вставка картинки в ячейку,если картинка большего </br>
          размера, чем размер ячейки - ячейка увеличиться </br>
          автоматически.
      </td>
     </tr>
     <tr>
      <td colspan="3" id="sens"><strong>
          Ширину таблицы равную 100% имеет смысл использовать при верстке страницы табличным
          методом. В этом случае удобно четко размечать модули отдельных блоков страницы.
          Данный метод, в настоящее время, применяется, но является устаревшим.</strong>
      </td>
     </tr>
    </table>
   </body>
 </html>
ivashkevich 22.06.2020 в 10:43

Отлично!

[email protected] 10.09.2020 в 14:21
 <!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="utf-8">
    <titl> Пробуем таблицу </titl>
    <meta name="keywords" content="литература, обучение, программа по скорочтению">
    <meta name="description" content="На этой странице вы сможете скачать программу по скорочтению для своего ребенка.">
    <style>
     table, td {
            border: 4px double black;
        }
        table {
            border-separate: separate;
        }
        td {
            padding: 20px;
        }
        .myTable {
                  margin: auto;
                  text- align: center;

                   width:100% ;
                   height: 50% ;

                   background-color: #db7093;
                 }
                 .px30 {
            width: 30px;
        }

    </style>    
</head>
<body>
<table class="myTable">
  <tr>
    <td class="100%"> номер дома </td>
    <td> номер квартиры </td>
    <td class="100%"> ФИО </td>
   </tr>
  <tr>
     <td> 41 </td>
     <td> 67 </td>
     <td> Турышев </td>
  </tr>  
  <tr> 
      <td> 26</td>
      <td> 107 </td> 
      <td> Спирин </td>
   </tr>      
</table>
</body>
</html>
ivashkevich 11.09.2020 в 19:25

Ошибка в теге title

Таблица - ОК

Darial 15.10.2020 в 15:16
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="keywords" content="цветы, деревья, кустарники, происхождение, садоводство, выращивание">
        <meta name="description" content="Здесь Вы найдете информацию о разных видах растений, краткую историю их происхождения а также советы по их выращиванию.">
        <title>Яблоко от яблони - Виды растений, их история, садоводство</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
    <img src="img/apple.jpg" alt="apple tree" width="200" height="130">
    <h1>Мир растений</h1>
    <p class="myClass">
        Для всех тех, кто кроме котиков и собачек обожает или даже предпочитает мир "неподвижных питомцев", тоесть <strong>растений</strong>, мы создали наш сайт. Тут собрана информация о разновидностях растений, их "привычках", <em>история происхождения</em>, а также все самые главные секреты по их ухаживанью.
        </p>
        <ol>
        <li>кустарники</li>
        <ul>
        <li>смородина</li>
        <li>малина</li>
        <a href="file:///C:/Users/Theodoros/Desktop/book1.html" target="_blank">История малины<a/>

        </ul>
        <li>деревья</li>
        <li>цветы</li>
        </ol>
        <hr>
        <h2>История растений</h2>
        <br>
        <table>
            <tr>
                <td rowspan="2">a</td>
                <td colspan="2">b</td>
                <td>c</td>
            </tr>
            <tr>
                <td>d</td>
                <td>e</td>
                <td>f</td>
                </tr>
        </table>
        <p>
        <table class="myTable">
            <tr>
            <td rowspan="2">Продукция</td>
            <td colspan="3">Налоговая ставка</td>
            </tr>
            <tr>
            <td>с 01.01 по 31.01</td>
            <td>с 01.01 по 31.01</td>
            <td>с 01.01.2015<t/td>
            </tr>
            <tr>
            <td>Дизельное топливо</td>
            <td>3450 руб.за 1 тонну</td>
            <td>4150 руб.за 1 тонну</td>
            <td>3950 руб.за 1 тонну</td>
            </tr>
</table>
</p>
    </body>
</html>
ol li {
    color:green;
}

ul li{
    color:red;
}

.myClass {
    font-style: italic;
}

table, td {
    border: 2px solid gray;
}
table {
    border-collapse: collapse;
}

td {
    padding:15px;
}

.myTable {
    margin: auto;
    width: 100%;
}
ivashkevich 18.10.2020 в 15:15

Супер!

elena. 17.10.2020 в 16:43
<!DOCTYPE html>
<html lang="ru">
<head>
    <title>Second Page</title>
    <meta charset="utf-8">
        <meta name="description" content="Как я учу верстку, программирование"/><!--описание страницы для поисковиков-->
        <meta name="keywords" content="верстка, программирование, поэтапно, личный опыт, описание, обучение"><!--ключевые слова, полезная информация для поисковых систем-->
        <link rel="stylesheet" type="text/css" href="style.css">
        <style>
            body{
                padding: 20px; 
            }
            h3 {
                text-align: center;
                color:#CCCCFF;
            }
            a {
                color: #34C924;
            }
            .seven{
                background-color: #F9DFCF;
                padding: 30px;
            }
            table{
                margin: auto;
                text-align: center;
                border: collapse;
                width: 100%;
            }
            table, td{
                border: 1px solid red;
            }
            td{
                padding: 20px;
            }
            .str{
                font-weight: 600;
            }
        </style>
</head>
<body>
    <div class="seven">
    <h3>Седьмой урок</h3>
    <h3>Таблицы в HTML</h3>
    <p>table - тег создающий саму таблицу. tr - строка внутри таблицы. td - ячейка внутри строки.</p>
    <p>Границы таблицы добавляются с помощью CSS стилей</p>
    <p>Объединение ячеек по горизонтали происходит с помощью атрибута cosplan. Для объединения двух ячеек будет следующая запись: <br>
    td cosplan="2" и добавляются до или после оставшиеся ячейки.</p>
    <p>Для объединения ячеек по вертикали атрибут rowspan</p>
    <br>
    <p>Выравнивание таблицы по центру margin: auto. Отступы вычисляются автоматически. Высоту и ширину таблицы можно задать с помощью width - ширина, height - высота</p>
    <br>
    <table>
        <tr class="str">
            <td rowspan="2">№</td>
            <td>ФИО</td>
            <td>Возраст</td>
        </tr>
        <tr>
            <td>1.</td>
            <td>Иванов И.И.</td>
        </tr>
        <tr>
            <td colspan="2">2.</td>
            <td>Петров П.П.</td>
        </tr>
    </table>
    <br><br><br>
    <table>
        <tr>
            <td rowspan="2">Продукция</td>
            <td colspan="3">Налоговая ставка</td>
        </tr>
        <tr>
            <td>с 01.01 по 31.01</td>
            <td>с 01.01 по 31.01</td>
            <td>с 01.01.2015</td>
        </tr>
        <tr>
            <td>Дизельное топливо</td>
            <td>3450 руб за 1 тонну</td>
            <td>4150 руб за 1 тонну</td>
            <td>3950 руб за 1 тонну</td>
        </tr>
    </table>

</body>
</html>
ivashkevich 18.10.2020 в 15:26

Отлично

[email protected] 20.11.2020 в 15:57
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Стоимость брекетов</title>
        <meta name ="keywords" content ="Брекеты...">
        <meta name ="description" content ="Брекеты, зубы, красота, уход">
            <style>
        table, td {
            border: 1px solid blue;
        }
        table {
            border-collapse: collapse;
        }
        td {
            padding: 20px;
        }
        .myTable {
            margin: auto;
            text-align: center;

            width: 500px;
            height: 300px;

            background-color: aliceblue;
        }
        .px30 {
            width: 30px;
        }
    </style>
    </head>
    <body>
    <table>
    <tr> <td></td>       <td>Металлические брекеты</td> <td>Керамические брекеты</td> <td>Сапфировые брекеты</td> <td>Лингвальные брекеты</td> </tr>
    <tr> <td>Россия</td> <td>600-1000$</td>             <td>1050-1500$</td>           <td>1000-1450$</td>         <td>1340-1900$</td>          </tr>
    <tr> <td>Америка</td> <td>1000-1500$</td>           <td>1650-2000$</td>           <td>1600-1950$</td>         <td>2800-4000$</td>          </tr>
    <tr> <td>Италия</td>  <td>950-1250$</td>             <td>1500-1900$</td>           <td>1450-1900$</td>        <td>2500-3700$</td>          </tr>
    </body>
</html>
ivashkevich 23.11.2020 в 17:31

А ДЗ?

[email protected] 23.11.2020 в 18:13

Так я таблицу создал, как и было написано

ivashkevich 24.11.2020 в 10:10

А про ширину в 100% там ещё было, видимо не увидели под статьёй. Что думаете по этому поводу?

[email protected] 24.11.2020 в 10:27

Ах, да. Увидел свою ошибку, извиняюсь.

Ran-Degz 08.12.2020 в 18:08

Расписание занятий, хех)

ivashkevich 08.12.2020 в 21:20

А ещё?)

[email protected] 03.01.2021 в 14:55
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Таблица </title>
        <style>
        table,td {border:3px solid blue;} 
        table{border-collapse:collapse;}
        td{padding:15px;}   
        body{font-size:18px;}   
        .myClass{
        margin:auto;
        margin-top:15px;
        width:100%;
        height:70s%;
        }

        </style>

    </head>

        <body>

        <table class="myClass">
        <caption style="margin-top:15px;"><STRONG>Сравнение модулей</STRONG></caption>
        <tr>
             <td><STRONG>Модель</STRONG></td> <td><STRONG>ОС</STRONG></td> <td><STRONG>Дисплей</STRONG></td> <td class="30x30"><STRONG>ОЗУ</STRONG></td> </tr>
        <tr>
            <td>Samsung Gallaxy S7</td>  <td rowspan="2">Android</td> <td>5.1</td> <td>4 GB</td></tr>
        <tr>
            <td>Sony Experia </td> <td>4.6</td> <td rowspan="2">2 GB</td> </tr>         
        <tr>
           <td>Apple Iphone 6s</td> <td>IOS</td>  <td>4.7</td> 
        </tr>
        </table>

    </body>
</html>
ivashkevich 04.01.2021 в 07:19

Теги пишутся маленькими буквами

Alexandr92 03.01.2021 в 19:29
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Домашнее задание по таблице</title>
    <meta name="discription" content="Домашка по курсу phpzone. Таблица с шириной 100%">
    <meta name="keywords" content="домашка, web, таблица">
    <style>
    table, td {
        border: 1px solid black; 
    }
    table {
        border-collapse: collapse;
    }
    td {
        padding: 20px;
    }
    .wTable {
        width: 100%;
        text-align: center;
        background-color: lightblue;
    }
    .hTD {
        width: 10%;
    }
    </style>
</head>
<body>
<table class="wTable">
    <tr>    <td class="hTD">11</td>     <td>12</td>     <td class="hTD">13</td>     </tr>
    <tr>    <td>21</td>     <td colspan="2">22 23</td>  </tr>
</table>
</body>
</html>
ivashkevich 04.01.2021 в 07:20

Отлично

[email protected] 11.01.2021 в 17:49
<!DOCTYPE html>
<html land="ru">
<head>
<meta charset="utf-8">
    <title>Пример таблицы</title>
    <style>
        table, td {
        border: 1px solid blue;
        }
        table {
        border-collapse: collapse;
        }
        td {
        padding: 20px;
        }

        .TV-show {
        margin: auto;
        background-color: aliceblue;
        width: 100%;
        text-align: center;
        }
    </style>
</head>
        <body>
<table class="TV-show">
                <tr>
                    <td rowspan="2">Сериалы</td>
                    <td colspan="5">Оценки</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                    <td>5</td>
                </tr>
                <tr>
                    <td>Доктор Кто</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td>*</td>
                </tr>
                <tr>
                    <td>Декстер</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td>*</td>
                    <td></td>
                </tr>
                <tr>
                    <td>Ветреный</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td>*</td>
                    <td></td>
                </tr>
            </table>
        </body>
</html>
ivashkevich 11.01.2021 в 19:50

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

Ivan 17.01.2021 в 17:02
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Огромная таблица</title>
    <style>
        .myTable {
            text-align: center; 

            width: 100%;
            height: 300px;
        }
        table, td {
            border: 1px solid blue;
        }
        table {
            border-collapse: collapse;
        }

    </style>
</head>
<body>
    <table class="myTable">
        <tr>
            <td colspan="5">график отжиманий</td>
        </tr>
        <tr>
            <td rowspan="3">Колличество отжиманий</td>
            <td>Понедельник</td>
            <td>Вторник</td>
            <td>Среда</td>
            <td>Четверг</td>
        </tr>
        <tr>
            <td>10</td>
            <td>10</td>
            <td>10</td>
            <td>10</td>
        </tr>
        <tr>
            <td>20</td>
            <td>30</td>
            <td>40</td>
            <td>50</td>
        </tr>
    </table>

</body>
</html>
ivashkevich 19.01.2021 в 19:07

Отличный пример!

Trop 20.01.2021 в 13:51
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title> пример таблицы </title>
        <style>

            table, td{
            border: 5px solid pink;
            }
            table {
            border-collapse: collapse;
            }
            td {
            padding: 20px;
            }
            .myTable {
            margin: auto;
            text-align: center;

            width: 100%;
            height: 500px;

            background-color: yellow;
            }

        </style>
 </head>
 <body>
 <table class="myTable">
     <tr>
     <td rowspan="2"> продукт </td><td colspan="3"> налог </td>
     </tr>
     <tr> 
     <td>с 1 до 20 </td><td> с 21 до 40 </td> <td> с 41 до 60 </td>
     </tr>
     <tr> 
     <td> 3500 </td> <td> 4500</td> <td> 5500</td> <td> 6500 </td>
</table>
</body>
</html>  
ivashkevich 21.01.2021 в 06:11

Отлично!

[email protected] 20.01.2021 в 18:32
<!DOCTYPE html>
<html>
<head>
        <!-- Внешнее добавление стилей -->
        <!--<link href="style.css" rel="stylesheet">
        <script src="head_scripts.js"></script> -->

        <!-- Инлайновое добавление стилей -->
<style>
        table{
        width:100%;
        border: 1px red solid;
        }

        td {
        text-align: left;
        border: 1px red solid;
        }
        th {
        text-align: left;
        border: 1px red solid;
        background: yellow;
        }
                </style>

    <meta charset="UTF-8">
    <title>Хобби</title>
    <meta name="keywords" content="вышивка, программирование, литература, кулинария, хобби, фотографии">
    <meta name="description" content="Будет рассказываться о любимом хобби.">
</head>
<body>
        <h1>Мое хобби</h1>
        <table width="100%">
        <tr><th>Наименование</th><th>Примечание</th></tr>
        <tr><td>Средняя левая ячейка</td><td>Средняя правая ячейка</td></tr>
        <tr><td>Нижняя левая ячейка</td><td>Нижняя правая ячейка</td></tr>
        </table>

        <!-- Инлайновое добавление скриптов -->
        <!--<script>
            JavaScript-код
        </script>-->

        <!-- Внешнее добавление скриптов -->
        <!--<script src="footer_scripts.js"></script>-->
</body>
</html>
ivashkevich 21.01.2021 в 06:18

Отлично

Bary 22.01.2021 в 18:25
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="таблицы">
<meta name="keywords" content="учусьпишите здесь ваш код делать таблицы">
<link rel="shortcut" href="htm5.jpg"/>
<title>таблицы</title>
<style>
table, td {
border: 1px solid blue
}
table {
border-collapse: collapse
}
td {
padding: 20px
}
.mytable {
margin: auto;
}

</style>
</head>
<body>
<table class="mytable">
    <tr>
       <td rowspan="2">продукция</td>
       <td colspan="3">налоговая ставка</td>
</tr>
<tr>
       <td>с01.01по31.01</td>
       <td>с01.01по31.01</td>
       <td>с01.01по31.01</td>
</tr>
<tr>
       <td>дизельное топливо</td>
       <td>3450р за 1 тонну</td>
       <td>4150 за 1тонну</td>
       <td>3950 за 1тонну</td>
</tr>
</table>
</body>
</html>

таблица получилась с первого раза)
ivashkevich 23.01.2021 в 20:22

Супер!

Silver 28.02.2021 в 11:10
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Пример таблицы</title>
    <style>
        table, td {
           border: 1px solid blue;
        }
        table {
           border-collapse: collapse;
        }
        td { padding: 20px; }
        .myTable { 
            margin: auto;
            text-align: center;
            width: 100%;
            height: 250px;
            background-color: aliceblue;
        }       
    </style>    
    </head>
    <body>
    <table class="myTable">
        <tr>
            <td rowspan="2">Продукция</td>
            <td colspan="3">Налоговая ставка</td>
        </tr>
        <tr>
            <td>с 01.01 по 31.01</td>
            <td>с 01.01 по 28.02</td>
            <td>с 01.03.2021</td>
        </tr>
        <tr>
            <td>Дизельное топливо</td>
            <td>3450 руб. за 1 тонну</td>
            <td>4150 руб. за 1 тонну</td>
            <td>3950 руб. за 1 тонну</td>
        </tr>
    </table>
    </body>
</html> 

Только не понял как поменять ширину отдельного столбца при условии, что в нём есть объединённые ячейки.

jetsaus 04.03.2021 в 16:59

index.html

<!doctype html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title>Таблицы</title>
</head>
<body>
    <table class="myTable">
        <tr>
            <td>Верхняя левая ячейка</td> <td>Верхняя правая ячейка</td>
        </tr>
        <tr>
            <td>Нижняя левая ячейка</td> <td>Нижняя правая ячейка</td>
        </tr>
    </table>
    <br>
    <table>
        <tr>
            <td>1</td>
            <td colspan="2">2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
    </table>
    <br>
    <table>
        <tr>
            <td class="px30" rowspan="2">1</td>
            <td>2</td>
            <td class="px30">3</td>
        </tr>
        <tr>
            <td>4</td>
            <td>5</td>
        </tr>
    </table>
    <br>
    <table class="prc100">
        <tr>
            <td rowspan="2">Продукция</td>
            <td colspan="3">Налоговая ставка</td>
        </tr>
        <tr>
            <td>с 01.01 по 31.01</td>
            <td>с 01.01 по 31.01</td>
            <td>с 01.01.2015</td>
        </tr>
        <tr>
            <td>Дизельное топливо</td>
            <td>3450 руб. за тонну</td>
            <td>4150 руб. за тонну</td>
            <td>3950 руб. за тонну</td>
        </tr>
    </table>
</body>
</html>

style.css

table, td {
    border: 1px solid blue;
}
table {
    border-collapse: collapse;
}
td {
    padding: 20px;
}
.myTable {
    margin: auto;
    text-align: center;
    width: 500px;
    height: 300px;
}
.px30 {
    width: 30px;
}
.prc100 {
    width: 100%;
}
ivashkevich 10.03.2021 в 08:10

Отлично

[email protected] 16.03.2021 в 19:32
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<style>
table, td {
    border: 1px solid blue;
}
table {
    border-collapse: collapse
}
td {
    padding: 500px;
}
.myTable {

}
.Mytable {
    margin: auto;
    text-align: center;
    width: 100%;
    hight: 100%;
}
</style>
</head>
<body>
<table class="myTable">
    <tr>
        <td>апельсин</td><td>единорог</td>
    </tr>
    <tr>
        <td>облако</td><td>радуга</td>
    </tr>
</table>

</body>
</html>
ivashkevich 17.03.2021 в 16:17

Ок)

[email protected] 02.06.2021 в 14:23
<!DOCTYPE html>
<html>
<head>
<title>Фрукты</title>
<style>
table, td {
    border: 1px solid blue;
}
table {
    border-collapse: collapse;
}
.fruit {
    margin: auto;
    width: 600px;
    height: 300px;
    text-align: center;

    background-color: aliceblue;
}
td {
            padding: 20px;
        }
</style>
</head>
<body>
    <table class="fruit">
        <tr>
             <td colspan="3"><strong>Фрукты</strong></td>
            </tr>
        <tr>
            <td><strong>№</strong></td>
            <td><strong>Название:</strong></td>
            <td><strong>Количество:</strong></td>
        </tr>
        <tr>
            <td>1.</td>
            <td>Персики</td>
            <td>3</td>
        </tr>
        <tr>
            <td>2.</td>
            <td>Вишня</td>
            <td>30</td>
        </tr>
        <tr>
            <td>3.</td>
            <td>Яблоки</td>
            <td>10</td>
        </tr>
        <tr>
            <td>4.</td>
            <td>Виноград</td>
            <td>20</td>
        </tr>
        <tr>
            <td>5.</td>
            <td>Груши</td>
            <td>7</td>
        </tr>
        <tr>
            <td colspan="2"><strong>Всего:</strong></td>
            <td>70</td>
        </tr>
ivashkevich 04.06.2021 в 21:04

Супер!

[email protected] 05.08.2021 в 16:12
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Пример таблицы</title>
    <style>
    table, td {
    border: 1px solid blue;
    }
    table {
    border-collapse: collapse;
    }
    td {
    padding: 20px;
    }
    .myTable {
    margin: auto;
    }
    </style>
</head>
<body>

<table class="myTable" width="100%">
    <tr>
        <td>Продукция:</td>
        <td colspan="2">Стоимость</td>
    </tr>
    <tr>
        <td>Мармеладные мишки</td>
        <td>63 рублей за 100 грамм</td>
    </tr>
    <tr>
    <td>Мамеладные машинки</td>
    <td>58 рублей за 100 грамм</td>
    </tr>
    <tr>
    <td>Мамеладные червячки</td>
    <td>71 рублей за 100 грамм</td>
    </td>
</table>

</body>
</html>
ivashkevich 06.08.2021 в 20:03

Отлично

[email protected] 06.08.2021 в 17:42
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title> Цветы</title>
</head>
<body>
<table> <style>
        table, td{border:1px solid blue;}
        table    {border-collapse: collapse;}
        td {padding:16px;}
        </style>        
    <tr>
        <td>Цветы</td><td>Фото</td>
    </tr>
    <tr>
        <td>Название народное</td><td>Назв. Научное </td>
    </tr>
</table>
</body>
</html>

а вот выставить таблицу в центр, через .my Table, не получается

ivashkevich 06.08.2021 в 20:05

А почему style внутри таблицы?

[email protected] 07.08.2021 в 02:17

Фууу,спс. Получилось! Не внимательность и комп.безграмотность сильно тормозят обучение.

[email protected] 07.08.2021 в 02:18

а как отодвинуть табл от левого края на заданную величину?

ivashkevich 07.08.2021 в 06:04

margin-left или padding-left. Погуглить про них)

[email protected] 12.08.2021 в 03:31

Нет слов на сайт

Daria 17.08.2021 в 15:41
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="keywords" content="Tesla, Тесла, электромобиль, electric car, чистая энергия">
    <meta name="description" content="Производитель электромобилей и решений для хранения электрической энергии">
    <title>Tesla</title>

    <link rel="stylesheet" href="style.css">

</head>
<body>
<p><img src="img/tesla.jpg" height="150" width="200"><b>Tesla</b> (ранее Tesla Motors) - американская компания,
    производитель электромобилей
    и (через свой филиал SolarCity) решений для хранения электрической энергии. Компания была основана в июле
    2003 года Мартином Эберхардом и Марком Тарпеннингом, но нынешнее руководство компании называют сооснователями
    Илона Маска, Джеффри Брайана Страубела и Иэна Райта.</p>
<ol>
    <li>
        <h3>Бизнес-модель</h3></li>
    В отличие от большинства автопроизводителей, <b>Tesla</b> не продаёт автомобили через независимых дилеров. Как
    правило,
    салоны Tesla представляют собой лишь демонстрационные площадки, покупка осуществляется непосредственно через
    сайт <b>Tesla</b>. Это отчасти схоже с моделью продаж Apple. В большинстве штатов США прямые продажи автомобилей от
    производителей и продажи через принадлежащих им дилеров ограничены или запрещены. Tesla пришлось столкнуться с
    судебными исками о запрете прямых продаж. В некоторых штатах (Виргиния, Техас) компания проиграла дела, и продажи
    <b>Tesla</b> были запрещены.
    <li>
        <h3>Показатели деятельности</h3></li><br>
    В 2020 году компания произвела более 500 тыс. автомобилей.
    <img src="img/value.png" align="middle">
    <li>
    <h3>Производственные мощности <a href="Factory.html">Подробнее</a></h3></li>
    <ul>
        <li>США</li>
        <li>Нидерланды</li>
        <li>Китай</li>
        <li>Германия</li>
    </ul>
    <li><h3>Модельный ряд <a href="Model.html">Подробнее</a></h3></li>
</ol>
<table class="table">
    <tr>
        <td>Tesla Roadster<br><img src="img/roadster1.jpg" height="210px" width="auto"></td>
        <td>Tesla Model S<br><img src="img/model%20s.jpg" height="210px" width="auto"></td>
        <td>Tesla Model X<br><img src="img/model%20x.jpg" height="210px" width="auto"></td>
    </tr>
    <tr>
        <td>Tesla 3<br><img src="img/model%203.jpg" height="210px" width="auto"></td>
        <td>Model Y<br><img src="img/model%20y.jpg" height="210px" width="auto"></td>
        <td>Tesla Roadster 2.0<br><img src="img/roadster.jpg" height="210px" width="auto"></td>
    </tr>
    <tr>
        <td>Tesla Semi<br><img src="img/semi.jpg" height="210px" width="auto"></td>
        <td colspan="2">Tesla Cybertruck<br><img src="img/cyber.jpg" height="210px" width="auto"></td>
    </tr>
</table>

</body>
</html>

##style.css

h3 {
    color : navy;
}
a {
    color: slategrey;
}
.myClass {
    font-style: oblique;
}
#back  {
    background-color: gold;
    border: goldenrod 3px solid;
    padding: 2px;
}
b {
    border-bottom: black dashed 2px;
}
tr, td {
    font-style: oblique;
}
table, td {
    border: 3px solid black;
    border-collapse: collapse;
    padding: 5px;
}
.table {
    width: 100%;
    height: auto;
    margin: auto;
    text-align: center;
}
ivashkevich 18.08.2021 в 20:18

Внутри тегов ul и li не размещаются абзацы

Daria 19.08.2021 в 08:48

Спасибо за уточнение!Поправила.

LongGamma 05.09.2021 в 09:04

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Пример таблицы</title>
    <!-- <link rel="stylesheet" href="style.css"> -->
    <style>
        body {
            background-color: lightgray;
        }
        table, td {
            border: 1px solid blue;
        }

        table {
            border-collapse: collapse;
            width: 100%;
        }

        td {
            padding: 20px;
        }
    </style>
</head>
<body>
<table>
    <tr>
        <td rowspan="2">Продукция</td>
        <td colspan="3">Налоговая ставка</td>
    </tr>
    <tr>
        <td>с 01.01 по 31.01</td>
        <td>с 01.01 по 31.01</td>
        <td>с 01.01.2015</td>
    </tr>
    <tr>
        <td>Дизельное топливо</td>
        <td>3450 руб. за 1 тонну</td>
        <td>4150 руб. за 1 тонну</td>
        <td>3950 руб. за 1 тонну</td>
    </tr>
</table>
</body>
</html>
ivashkevich 06.09.2021 в 12:04

Отлично!

LongGamma 05.09.2021 в 09:10

Поправьте, пожалуйста : там, где вы рассказываете про объединение ячеек, первое предложение после заголовка "Зачастую несколько ячеек нужно объеденить (надо объедИнить) в одну", в первом предложении про rowspan такая же описка. Ни в коем случае не придирки, просто хочется, чтобы на этом сайте всё было идеально)

ivashkevich 06.09.2021 в 12:03

Спасибо за замечание. Исправил)

Mishka505 23.10.2021 в 09:59
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">

    <title>Пример таблицы</title>

</head>

<body>
    <table class="mytable">
        <tr>
            <td rowspan="2">SSD 256GB</td>
            <td colspan="3">Твердотельный накопитель</td>
        </tr>
        <tr>
            <td>240 ГБ 2.5" SATA накопитель Kingston A400 Цена 2 499 ₽</td>
            <td>250 ГБ 2.5" SATA накопитель Samsung 870 EVO [MZ-77E250BW] Цена 4 950 ₽</td>
            <td>240 ГБ 2.5" SATA накопитель WD Green [WDS240G2G0A] Цена 3099 rub</td>
        </tr>
        <tr>
            <td>SSD 512 GB</td>
            <td>512 ГБ 2.5" SATA накопитель Patriot Memory P210 [P210S512G25] Цена 4 299 ₽ </td>
            <td>512 ГБ 2.5" SATA накопитель Goodram Irdm Pro gen.2 Цена 5 999 ₽ </td>
            <td>512 ГБ PCIe накопитель GIGABYTE Aorus RGB AIC [GP-ASACNE2512GTTDR] Цена 10 999 ₽</td>
        </tr>
    </table>
</body>

</html>

##style.css

table,
td {
    border: 1px solid rgb(118, 226, 188);
}
table {
    border-collapse: collapse;
}
td {
    padding: 20px;
}
.mytable {
    margin: auto;

    text-align: center;
    width: 500px;
    height: 300px;
    background-color: rgb(193, 237, 247);
}
Логические задачи с собеседований