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

Чтобы поместить вертикальное слово слева от таблицы в 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>&#x7C;</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 в соответствии с вашими требованиями.