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 
Add a comment |
4 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>
Comments
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.
Comments
easy. Just leave the first td in the first tr - empty
Comments
You can make it with quite elementary HTML and CSS classes:
table{border-collapse:collapse} td{text-align:center;padding:5px;border:1px solid #000} td.empty{border:0} td.headt{font-weight:bold;background-color:#b7f926}<table> <tr> <td class="empty"> </td> <td class="headt">Header 1</td> <td class="headt">Header 2</td> <td class="headt">Header 3</td> </tr> <tr> <td class="headt">Header 1</td><td>1</td><td>2</td><td>3</td> </tr> <tr> <td class="headt">Header 2</td><td>1</td><td>2</td><td>3</td> </tr> <tr> <td class="headt">Header 3</td><td>1</td><td>2</td><td>3</td> </tr> </table>This is just a sketch/suggestion, but hopefully useful to compare for future readers :)
