Menu
How would I get a table with both horizontal and vertical headers?
So e.g.
header1 header2 header3
header1 1 1 1
header2 2 2 2
header3 3 3 3
565
Tables in HTML can have horizontal header and vertical header. For the horizontal header, we need to set all <th> inside a single <tr> tag.
4. Click "Vertical Text" from the Orientation drop-down menu. This selection keeps the letters angled normally, but lists the text vertically. Alternatively, select "Rotate Text Up" or "Rotate Text Down," which rotates the entire header up or down.
Tables with multiple headers may also need to have a caption to identify it and a summary to describe the layout of the table, see Caption & Summary.
A table header row is the top row of a table that acts as a title for the type of information they will find in each column. It's common to manually bold the top row to signal this information visually, but it's important to mark table headers at the code level so the change is also structural.
Like @UlrichSchwarz said, you can just use <th> instead of <td> in the first column. Using scope, you can make it more semantically descriptive:
<table>
<tr>
<th></th>
<th scope="col">header1</th>
<th scope="col">header2</th>
<th scope="col">header3</th>
</tr>
<tr>
<th scope="row">header 1</th>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<th scope="row">header 2</th>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<th scope="row">header 3</th>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
</table>While you can still just <th> the entries in the first column, there is no column-equivalent of <thead>/<tbody> that I'm aware of.
30
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
