JSFiddle - React, Tailwind, and code Playground

by holden321

HTML

<table id="pole_size">
    <tr>
        <td colspan="3" id="header">
            	<h1 style="color: Orange;">Название сайта</h1>

        </td>
    </tr>
    <tr>
        <td id="left_col" bgcolor="  ">
            <ul class="drop_vert_menu">
                <li><a href="#"><span>Главная</span></a>

                </li>
                <li><a href="#"><span>Контакты</span></a>

                    <ul>
                        <li><a href="#"><span>Телефон</span></a>

                        </li>
                        <li><a href="#"><span>E-mail</span></a>

                        </li>
                        <li><a href="#"><span>Адреса</span></a>

                        </li>
                    </ul>
                </li>
                <li><a href="#"><span>О сайте</span></a>

                    <ul>
                        <li><a href="#"><span>История</span></a>

                        </li>
                        <li><a href="#"><span>Коллектив</span></a>

                        </li>
                    </ul>
                </li>
                <li><a href="#"><span>Карта сайта</span></a>

                </li>
                <li><a href="#"><span>Ссылки</span></a>

                </li>
            </ul>
        </td>
        <td id="center_col">
            	<h2 align="center">Демонстрация </h2>

            <!-- <p>$---------------------------------------------------------------------$</p> -->
            <p>Текст между тегами <b>&lt;p>&lt;/p></b>, для которых прописаны стилевые параметры.</p>	<i>Наклонный текст между тегами <b>&lt;i>&lt;/i></b>, для которых стили не прописаны.</i>

            <br>
            <br>	<a href="#">Ссылка красного цвета</a>

            <br>
            <br>	<big>Большой текст без применения стилей.</big>

            <br>
            <br>
            <p>Контент заключённый между тегов &lt;p>&lt;/p>, в котором уже с другими отступами отображаются:
                <br>
                <br> <i>Наклонный текст...

CSS

/**
 резиновая табличная вёрстка
 
 В селекторе #pole_size { … } регулируется растяжение шаблона относительно окна веб-браузера; 
vertical-align:top – параметр, благодаря которому меню (и прочий контент) будет прижиматься к верху ячейки; 
 
*/
 #pole_size {
    /* регулируется растяжение шаблона относительно окна веб-браузера;*/
    width: 100%;
}
#header {
    height: 140px;
    background-color:#B1F080;
    padding: 32px;
}
#left_col {
    width: 198px;
    vertical-align:top;
    /*  – параметр, благодаря которому меню (и прочий контент) будет прижиматься к верху ячейки; */
    background-color: White;
}
#center_col {
    background-color: gold;
    padding: 16px;
    max-width: 400px;
}
/*
Свойство max-width не применяется к тегу <table>. 
Чтобы задать максимальную ширину таблицы создайте тег <div> 
с ограничениями и в него включите таблицу с шириной 100%
*/

/**************  width  ******************/

/**
Устанавливает ширину блочных или заменяемых элементов (к ним, например, относится тег <img>). 
Ширина не включает толщину границ вокруг элемента, значение отступов и полей.

!!!!!!!!!!!!!!!

Браузеры неодинаково работают с шириной, результат отображения зависит от используемого <!DOCTYPE>   

При использовании процентной записи ширина элемента вычисляется в зависимости от ширины родительского элемента. 
Если родитель явно не указан, то в его качестве выступает окно браузера.

*/
 #right_col {
    vertical-align:top;
    text-align: center;
    background-color:#E6EEE0;
    dislay:inline;
    /* для фиксации ширины*/
    width: 400px;
    /* не помагает фиксировать ширину ??? */
}
#footer {
    height: 50px;
    padding: 12px;
    background-color: #B1F080;
    font-size: 12px;
}
p {
    margin: 16px 10px 20px;
}
a {
    color: Red;
    outline: none;
    text-decoration: underline;
}
a:hover {
    text-decoration: none;
}
.drop_vert_menu {
    list-style-type: none;
    width: 198px;
    margin: 0;
    padding: 0;
}
.drop_vert_menu ul {
   ...