После копирования чужих таблиц и вставки их в виде изображений края букв получаются размытыми. Возникает необходимость вручную прописать таблицу в html-коде. Для этого необходимо зайти в админ-панель сайта и открыть оттуда нужную страницу или запись. Но редактировать ее не в визуальном формате, а в режиме html-редактора (он иногда находится во вкладке «Текст» сверху над содержимом статьи).
Какие теги нужны для построения таблицы
Для ввода самого факта предстоящего существования таблицы нужно начать с тега <table> и </table> в самом конце соответственно. Упорядочить данные столбцов и строк помогают другие теги:
– <tr> и заключительный </tr> обрамляют каждую строку кода. Это обязательно. Затем указываем, что мы пишем: строку или столбец.
Если планируете писать названия столбцов, то нужно добавить <th>текст заголовка</th><th>текст заголовка</th>. Всего два таких заголовка будет означать, что в таблице – 2 столбика.
Данные (содержимое) столбиков распределяется по строкам. Им нужен тег
<td>.
На практике это выглядит следующим образом:
<td>данные</td><td>данные</td></tr>
Не забываем, что перед каждой строкой кода, неважно, обозначает она столбцы или строки в самом начале пишется <tr>, а на самом конце – </tr>.
При желании подписать таблицу сразу после открывающего тега <table>
нужно прописать тег заголовка таблицы – <caption>Список методов</caption>. Таким образом, генерируемая таблица будет называться «Список методов».
Как удобно сгруппировать данные в коде таблицы
В целях отсутствия излишних дублей <tr> при многостолбцовой раскладке можно упомянуть данный тег всего один раз в начале.
<table>
<tr>
Затем прописать все названия столбцов и окончить закрывающим </tr>.
Как пример:
<table>
<caption>Подверженность</caption>
<tr>
<th> </th>
<th>Подверженность</th>
</tr>
То есть у нас первый столбец будет без названия, а второй – описывать различные виды подверженности.
Композит для наполнения контентом ячеек строк:
<tr>
<td>10</td>
<td>Постоянная</td>
</tr>
То есть, <tr> служит отделителем ячеек и столбцов, той границей – пунктирной линией, которая помогает видеть отдельные блоки. Дальше продолжаем описывать значения строчных элементов ячеек.
<tr>
<td>6</td>
<td>Регулярная (ежедневно)</td>
</tr>
Итак, пишем код готовой таблицы с учетом всего, что разложено «по полочкам» выше:
<!-- wp:paragraph -->
<p><table></p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p><caption>Подверженность</caption></p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p> <tr></p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p><th> </th></p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p> <th>Подверженность</th></p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p></tr></p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p><tr></p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p> <td>10</td></p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p><td>Постоянная</td></p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p></tr></p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p><tr></p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p> <td>6</td></p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p><td>Регулярная (ежедневно)</td></p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p></tr></p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p><tr></p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p> <td>3</td></p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p><td>Время от времени (еженедельно)</td></p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p></tr></p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p><tr></p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p> <td>2</td></p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p><td>Иногда (ежемесячно)</td></p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p></tr></p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p><tr></p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p> <td>1</td></p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p><td>Редко (ежегодно)</td></p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p></tr></p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p><tr></p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p> <td>0,5</td></p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p><td>Очень редко</td></p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p></tr></p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p><tr></p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p> <td>0</td></p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p><td>Никогда</td></p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p></tr></p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p></table></p>
<!-- /wp:paragraph -->
Теперь пишем код другой какой-нибудь таблицы. Это мы деляем заготовку для того, чтобы расположить их рядом друг с другом в одной строке. Ведь порой нужно проиллюстрировать какой-то смысловой момент сайта в двух таблицах и будет очень некрасиво, если они будут тонкими, прижатыми слева расположенными друг над другом. Рациональнее поставить их поблизости в ряд. Так изящнее, и компановка пространства записи получается органичнее.
<table>
<caption>Вероятность</caption>
<tr>
<th> </th>
<th>Вероятность</th>
</tr>
<tr>
<td>10</td>
<td>Ожидаемо, это случится</td>
</tr>
<tr>
<td>6</td>
<td>Очень вероятно</td>
</tr>
<tr>
<td>3</td>
<td>Необычно, но возможно</td>
</tr>
<tr>
<td>1</td>
<td>Невероятно</td>
</tr>
<tr>
<td>0,5</td>
<td>Можно себе представить, но невероятно</td>
</tr>
<tr>
<td>0,2</td>
<td>Почти невозможно</td>
</tr>
<tr>
<td>0,1</td>
<td>Почти невообразимо</td>
</tr>
<tr>
<td>0</td>
<td>Абсолютно невозможно</td>
</tr>
</table>
Как расположить две таблицы рядом в одной строке на html
Имеется уже разработанный код двух расположенных горизонтально бок о бок с друг другом таблиц. В них нужно скопировать только данные по каждой из них. Изначально скрипт выглядит так:
<table width=”460″ height=”49″ border=”0″ cellpadding=”0″ cellspacing=”2″>
<tr>
<td height=”49″ valign=”top”><table width=”230″ height=”50″ border=”1″ cellpadding=”0″ cellspacing=”0″>
<tr>
<td height=”48″ valign=”top”> </td>
</tr>
</table></td>
<td valign=”top”><table width=”230″ height=”50″ border=”1″ cellpadding=”0″ cellspacing=”0″>
<tr>
<td height=”48″ valign=”top”> </td>
</tr>
</table></td>
</tr>
</table>
А вот как он будет выглядеть, если мы подставим сочиненные выше коды:
<table width=”460″ height=”49″ border=”0″ cellpadding=”0″ cellspacing=”2″>
<tr>
<td height=”49″ valign=”top”><table width=”230″ height=”50″ border=”1″ cellpadding=”0″ cellspacing=”0″>
<th> </th>
<th>Подверженность</th>
</tr>
<tr>
<td>10</td>
<td>Постоянная</td>
</tr>
<tr>
<td>6</td>
<td>Регулярная (ежедневно)</td>
</tr>
<tr>
<td>3</td>
<td>Время от времени (еженедельно)</td>
</tr>
<tr>
<td>2</td>
<td>Иногда (ежемесячно)</td>
</tr>
<tr>
<td>1</td>
<td>Редко (ежегодно)</td>
</tr>
<tr>
<td>0,5</td>
<td>Очень редко</td>
</tr>
<tr>
<td>0</td>
<td>Никогда</td>
</tr>
<tr>
<td height=”48″ valign=”top”> </td>
</tr>
</table></td>
<td valign=”top”><table width=”230″ height=”50″ border=”1″ cellpadding=”0″ cellspacing=”0″>
<th> </th>
<th>Вероятность</th>
</tr>
<tr>
<td>10</td>
<td>Ожидаемо, это случится</td>
</tr>
<tr>
<td>6</td>
<td>Очень вероятно</td>
</tr>
<tr>
<td>3</td>
<td>Необычно, но возможно</td>
</tr>
<tr>
<td>1</td>
<td>Невероятно</td>
</tr>
<tr>
<td>0,5</td>
<td>Можно себе представить, но невероятно</td>
</tr>
<tr>
<td>0,2</td>
<td>Почти невозможно</td>
</tr>
<tr>
<td>0,1</td>
<td>Почти невообразимо</td>
</tr>
<tr>
<td>0</td>
<td>Абсолютно невозможно</td>
</tr>
<tr>
<td height=”48″ valign=”top”> </td>
</tr>
</table></td>
</tr>
</table>
Как составить таблицу из 3-х отдельных таблиц
Здесь пойдем простым путем. Зададим такой код в html
<table>
<tr>
<td>1</td>
</tr>
</table>
<table>
<tr>
<td>2</td>
</tr>
</table>
<table>
<tr>
<td>3</td>
</tr>
</table>
Видно, что цифры 1,2 и 3 следует заменить на названия строк и к каждому приписать ячейки столбца тегом th
<table>
<tr>
<th> </th>
<th>Подверженность</th>
</tr>
<tr>
<td>10</td>
<td>Постоянная</td>
</tr>
<tr>
<td>6</td>
<td>Регулярная (ежедневно)</td>
</tr>
<tr>
<td>3</td>
<td>Время от времени (еженедельно)</td>
</tr>
<tr>
<td>2</td>
<td>Иногда (ежемесячно)</td>
</tr>
<tr>
<td>1</td>
<td>Редко (ежегодно)</td>
</tr>
<tr>
<td>0,5</td>
<td>Очень редко</td>
</tr>
<tr>
<td>0</td>
<td>Никогда</td>
</tr>
</table>
<table>
<tr>
<th> </th>
<th>Вероятность</th>
</tr>
<tr>
<td>10</td>
<td>Ожидаемо, это случится</td>
</tr>
<tr>
<td>6</td>
<td>Очень вероятно</td>
</tr>
<tr>
<td>3</td>
<td>Необычно, но возможно</td>
</tr>
<tr>
<td>1</td>
<td>Невероятно</td>
</tr>
<tr>
<td>0,5</td>
<td>Можно себе представить, но невероятно</td>
</tr>
<tr>
<td>0,2</td>
<td>Почти невозможно</td>
</tr>
<tr>
<td>0,1</td>
<td>Почти невообразимо</td>
</tr>
<tr>
<td>0</td>
<td>Абсолютно невозможно</td>
</tr>
</table>
<table>
<tr>
<th> </th>
<th>Последствия</th>
</tr>
<tr>
<td>100</td>
<td>Катастрофа, много жертв</td>
</tr>
<tr>
<td>40</td>
<td>Авария, несколько жертв</td>
</tr>
<tr>
<td>15</td>
<td>Очень тяжелые, 1 человек погиб сразу или через какое-либо (длительное) время</td>
</tr>
<tr>
<td>7</td>
<td>Тяжелые, инвалидность</td>
</tr>
<tr>
<td>3</td>
<td>Серьезные, травмы и невыход на работу</td>
</tr>
<tr>
<td>1</td>
<td>Минимальные, оказание первой помощи</td>
</tr>
</table>
style.css пополним следующей записью:
table {
width: 33.3%;
border: 1px solid black;
float: left;
}
