Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Vertical and Horizontal Headers in a table?

Tags:

html

css

tabular

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 
like image 565
will_code_for_food Avatar asked Sep 08 '11 21:09

will_code_for_food


People also ask

How do I create a horizontal header in a table?

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.

How do I make a vertical header in a table?

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.

Can a table have multiple headers?

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.

What are the column headers in the table?

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.


2 Answers

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>
like image 82
allicarn Avatar answered Oct 15 '22 15:10

allicarn


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.

like image 30
Ulrich Schwarz Avatar answered Oct 15 '22 16:10

Ulrich Schwarz