Как сделать текст вертикальным в таблице HTML

как вертикально писать текстКазалось бы тривиальная задача — повернуть текст в таблице на 90 градусов. В Excel это делается парой кликов. На практике все оказалось не так просто. Вот для чего вообще может понадобиться делать вертикальный текст в таблицах, ведь его читать неудобно?

Вообще таблицы в HTML некое скрытое зло, с которым приходится бороться или уживаться. Сегодня попробуем побороть это зло.

Итак, если таблица имеет кучу столбцов, то общий ее размер может просто не вписаться в отведенные рамки границ контента.

как написать текст вертикально

Чтобы сузить ширину таблицы, напрашивается только один простой способ (в плане визуализации) — это повернуть текст в заголовке на 90 градусов. Как уже говорилось ранее — технически задача решается не так просто. В интернете полно советов как расположить текст вертикально с помощью CSS и даже javascript.

Для моих нужд все эти варианты были слишком наворочены, ибо предполагали добавление кода в CSS или создание отдельных скриптов. Ну лишнее это все, тем более если таблица используется разово, то, имхо, лучше эту таблицу и редактировать без наращивания кода в других местах.

Кому очень интересно, то вот один из кодов CSS для вертикального текста в таблицах HTML.

<style>
#vert{width:10%;}
#vert td{text-align:center;padding:10px 0;}
.vert-text{
-ms-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);

-ms-transform-origin: left top 0;
-moz-transform-origin: left top 0;
-webkit-transform-origin: left top 0;
transform-origin: left top 0;

margin-left: 30px;
padding: 0;
float: left;
height:80px;
width:5px;
white-space: nowrap;
}
</style>

А вот и код таблицы

<table border=»1″ cellpadding=»0″ cellspacing=»0″>
<tr>
<td><div class=»vert-text»>Заголовок 1</div></td>
<td><div class=»vert-text»>Заголовок 2</div></td>
<td><div class=»vert-text»>Заголовок 3</div></td>
<td><div class=»vert-text»>Заголовок 4</div></td>
<td><div class=»vert-text»>Заголовок 5</div></td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
</table>

Согласитесь, много наворотов, чтобы разового повернуть текст вертикально.

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

Для этого используем в тегах стандартный стиль writing-mode. Параметры, которые использует этот стиль:

  • horizontal-tb — значение по умолчанию, направление текста слева направо
  • vertical-rl — текст располагается вертикально и выравнивается сверху вниз и справа налево
  • vertical-lr — текст располагается вертикально и выравнивается сверху вниз и слева направо

Стоит заметить, что данный стиль может быть применен ко всем элементам HTML, кроме таблиц. Вот такой парадокс. Но это меньшая из проблем, мы просто текст обрамляем в тег <p></p> и все работает как надо!

Смотрим как это все выглядит в коде

<table >
<tr>
<td> <p style=»writing-mode: vertical-rl»>Заголовок</p></td>
<td> <p style=»writing-mode: vertical-lr»>Заголовок</p></td>
<td> <p style=»writing-mode:vertical-rl»>Заголовок</p></td>
<td> <p style=»writing-mode: vertical-rl»>Заголовок</p></td>
<td> <p style=»writing-mode: vertical-rl»>Заголовок</p></td>
<td> <p style=»writing-mode: vertical-rl»>Заголовок</p></td>
</tr>
<tr>
<td>текст</td>
<td>текст</td>
<td>текст</td>
<td>текст</td>
<td>текст</td>
<td>текст</td>
</tr>
</table>

На основе имеющихся данных получаем ужатую таблицу с вертикальным текстом в заголовках.

вертикальный текст html

Задача выполнена, текст в HTML-таблице повернут вертикально без использования дополнительных CSS и скриптов.

А как вы поворачиваете текст? Делитесь в комментариях.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *