Чтобы поместить вертикальное слово слева от таблицы в HTML, вы можете использовать различные методы. Вот несколько вариантов:
Метод 1: использование свойства CSS writing-mode
<style>
.vertical-text {
writing-mode: vertical-rl; /* Vertical text direction */
text-orientation: upright; /* Rotates the text upright */
white-space: nowrap; /* Prevents text from wrapping */
}
</style>
<table>
<tr>
<td class="vertical-text">Vertical Word</td>
<td>Table Content</td>
</tr>
</table>
Метод 2. Использование свойства преобразования CSS
<style>
.vertical-text {
transform: rotate(-90deg); /* Rotates the text by 90 degrees */
white-space: nowrap; /* Prevents text from wrapping */
}
</style>
<table>
<tr>
<td class="vertical-text">Vertical Word</td>
<td>Table Content</td>
</tr>
</table>
Метод 3. Использование HTML-объекта для вертикального текста
<table>
<tr>
<td>|</td> <!-- HTML entity for a vertical line -->
<td>Vertical Word</td>
<td>Table Content</td>
</tr>
</table>
Метод 4. Использование CSS Flexbox
<style>
.table-container {
display: flex;
flex-direction: row;
align-items: flex-start;
}
.vertical-text {
white-space: nowrap; /* Prevents text from wrapping */
writing-mode: vertical-rl; /* Vertical text direction */
text-orientation: upright; /* Rotates the text upright */
transform: rotate(180deg); /* Rotates the text by 180 degrees to make it vertical */
margin-right: 5px; /* Adds some space between the vertical word and table content */
}
</style>
<div class="table-container">
<div class="vertical-text">Vertical Word</div>
<table>
<tr>
<td>Table Content</td>
</tr>
</table>
</div>
Это всего лишь несколько способов добиться вертикального размещения текста в левой части таблицы в HTML. Не забудьте настроить стили CSS в соответствии с вашими требованиями.