JSFiddle - React, Tailwind, and code Playground

by popsul

HTML

<!-- таблички :) -->
<html>
    <head>
    </head>
    <body>
        <!-- простая таблица -->
        <table>
            <!-- таблица состоит из строк tr -->
            <tr>
                <!-- и ячеек td которые находятся внутри tr -->
                <td>1</td>
                <td>2</td>
            </tr>
            <tr>
                <td>3</td>
                <td>4</td>
            </tr>
        </table>
        <!-- не простая таблица -->
        <table>
            <tr>
                <!-- атрибут colspan указывает сколько ячеек занять -->
                <td colspan="2">опа</td>
                <td>1</td>
            </tr>
            <tr>
                <td>2</td>
                <td colspan="2">опа</td>
            </tr>
            <tr>
                <td>3</td>
                <td>4</td>
                <td>5</td>
            </tr>
        </table>
        <!-- и еще не простая таблица --> 
        <table>
            <tr>
                <!-- атрибут rowspan указывает сколько занять строк -->
                <td rowspan="2">ы<br />ы<br />ы</td>
                <td>1</td>
            </tr>
            <tr>
                <!-- тут всего одна ячейка, т.к. одна уже занята ячейкой из предыдущей строки --> 
                <td>2</td>
            </tr>
        </table>
        <p>
            <strong>Задачи:</strong>
            <ol>
                <li>Сделать каких нибудь табличек;</li>
                <li>Переместить стиль в тег style который поместить внутрь head;</li>
                <li>Ну и конечно же посмотреть как сделан список :).</li>
            </ol>
        </p>
    </body>
</html>

CSS

/* это CSS комментарий */
/* каждое правило имеет структуру вида:
СЕЛЕКТОР {
    свойство: значение;
    свойство: значение;
}
*/
/* table - это селектор по типу, или же, более ясно - по тегу. то есть 
для тега table */
table { 
    /* свойство margin-bottom указывает внешний отступ снизу */
    margin-bottom:10px;
}

/* более крутой селектор, выбирает элементы td внутри элемента table не учитывая то, насколько "глубоко" они находятся внутри table */
table td {
    /* свойство border указывает вид и цвет бордера... бордер - граница элемента */
    /* первое значение - размер границы, 1 пиксель, второе свойство - тип бордера, solid - сплошной (есть еще dotted, dashed...), третье свойство - цвет бордера, по сути можно записать любой цвет на английском языке) */
    border:1px solid black;
    /* свойство padding указывает внутренний отступ. в данном случае устанавливаем отступ равный 5и пикселам */
    padding:5px;
}