Geek Answers Handbook

Create a table with subtitles and side headers

I am trying to create a table with subtitles and side headers that look like this:

enter image description here

This is what I have so far:

<table> <thead> <tr> <th>Object</th> <th>Openings</th> <th>Internal Dimensions</th> <th>Weight</th> <th>Volume</th> </tr> </thead> <tbody> <tr> <td>Box</td> <td>300x500</td> <td>300cm x 400cm x 600cm</td> <td>Min: 100g, Max: 200g, NA</td> <td>300</td> </tr> </tbody> </table>

Is it possible to have a table that looks similar to the image above.

+6
source share
3 answers

Use CSS

 <style type="text/css"> .blue_bg{ background-color: blue; } </style> <table> <thead> <tr> <th>Hello</th> <th>Hello</th> <th>Hello</th> </tr> </thead> <tbody> <tr> <td class="blue_bg">Hello</td> <td class="blue_bg">Hello</td> <td class="blue_bg">Hello</td> </tr> <tr> <td class="blue_bg">Hello</td> <td>Hello</td> <td>Hello</td> </tr> <tr> <td class="blue_bg">Hello</td> <td>Hello</td> <td>Hello</td> </tr> <tr> <td class="blue_bg">Hello</td> <td>Hello</td> <td>Hello</td> </tr> </tbody> </table>
0
source

already answered, but the markup should be something like this:

 <table> <thead> <tr> <th colspan="2">Object</th> <th colspan="2">Openings</th> <th colspan="3">Internal Dimensions</th> <th colspan="3">Weight</th> <th>Volume</th> </tr> <tr> <th>sub header</th> <th>sub header</th> <th>sub header</th> <th>sub header</th> <th>sub header</th> <th>sub header</th> <th>sub header</th> <th>sub header</th> <th>sub header</th> <th>sub header</th> <th>sub header</th> </tr> </thead> <tbody> <tr> <th>row header</th> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </tbody> </table>

with some style that it renders: http://fiddle.jshell.net/TLAV8/

+13
source

Something like that

 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Testing</title> <style type="text/css"> table { width: 100%; border: 1px solid black; } table td, table th { border: 1px solid black; } table .FirstColumn { background-color: #9999dd; } table thead tr { background-color: blue; } table tbody.secondHeader tr { background-color: skyblue; } </style> </head> <body> <table cellpadding="0" cellspacing="0"> <colgroup> <col class="FirstColumn"> </colgroup> <thead> <tr> <th colspan="2">Object</th> <th colspan="2">Openings</th> <th colspan="3">Internal Dimensions</th> <th colspan="3">Weight</th> <th>Volume</th> </tr> </thead> <tbody class="secondHeader"> <tr> <th>Type</th> <th>Size</th> <th>Width</th> <th>Height</th> <th>Length</th> <th>Width</th> <th>Height</th> <th>Max</th> <th>Min</th> <th>Tare</th> <th>Capacity</th> </tr> </tbody> <tbody> <tr> <td>20 std</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td>40 std</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td>50 std</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td>60 std</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </tbody> </table> </body> </html>

I would suggest looking at the HTML tables and all the options a little deeper, a good place to start would be here , including, but not limited to, concepts such as colgroup , col and colspan

+1
source

More articles:


All Articles