How to Create Vertical Tables in HTML?

Vertical Table Rendering in HTML

Traditionally, HTML tables display data horizontally with rows across the page. However, there are instances where you may require vertical tables with rows displayed vertically, with headers positioned on the left.

To achieve this, CSS can be employed to modify the table's display properties:

tr { display: block; float: left; }
th, td { display: block; }

This CSS will cause the table rows ( elements) to behave like columns, displayed vertically. Both table headers () and table data () will also be displayed vertically.

However, it's important to note that this approach eliminates the table behavior, making it unsuitable for typical table operations. To resolve this, you can employ CSS border collapse:

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

This CSS ensures that the borders only appear between table cells (not around the entire column), giving the appearance of a properly bordered table.

By implementing these CSS rules, you can create vertical tables in HTML, providing greater flexibility in presenting your data.

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