How to Create Vertical HTML Tables with CSS?

Creating Vertical HTML Tables

In HTML, tables are typically displayed with horizontal rows and vertical columns. However, you may encounter scenarios where you want to invert this orientation, creating "vertical" tables with vertical rows and table headers on the left.

To achieve this, a simple CSS solution can be employed:

<code class="css">tr { display: block; float: left; }
th, td { display: block; }</code>

This CSS rearranges the elements within the table so that individual rows are displayed as vertical blocks next to each other, with the table header cells appearing on the left.

Accessing Rows in Vertical Tables

While the CSS transforms the appearance of the table, it does not affect how you access the rows in the HTML code. You can still use the element to insert data dynamically, as you would in a traditional horizontal table.

Additional Styling Considerations

To further enhance the visual appearance of your vertical table, you might consider:

• Using border-collapse to remove borders between adjacent cells.
• Tweaking the width and height properties of the and / elements for optimal cell dimensions.

Example Code

Here is an example of a vertical HTML table that you can customize:

<code class="css">/* single-row column design */
tr { display: block; float: left; }
th, td { display: block; border: 1px solid black; }

/* border-collapse */
tr>*:not(:first-child) { border-top: 0; }
tr:not(:first-child)>* { border-left:0; }</code>

<code class="html"><table>
<tr>
    <th>name</th>
    <th>number</th>
</tr>
<tr>
    <td>James Bond</td>
    <td>007</td>
</tr>
<tr>
    <td>Lucipher</td>
    <td>666</td>
</tr>
</table></code>

By implementing these CSS styles, you can easily create vertical tables in HTML while maintaining the functionality and accessibility of traditional tables.

The above is the detailed content of How to Create Vertical HTML Tables with CSS?. For more information, please follow other related articles on the PHP Chinese website!