<!DOCTYPE html> <html> <head> <meta charset=utf-8> <style> table { writing-mode: vertical-lr; } #r1c1, #r1c2, #r1c3, #r1c4 { width: 50px; } #r2c1, #r2c2, #r2c3, #r2c4 { width: 100px; } #r1c1, #r2c1 { height: 20px; } #r1c2, #r2c2 { height: 30px; } #r1c3, #r2c3 { height: 40px; } #r1c4, #r2c4 { height: 50px; } #r1c1 { background: #003; } #r1c2 { background: #007; } #r1c3 { background: #00b; } #r1c4 { background: #00f; } #r2c1 { background: #030; } #r2c2 { background: #070; } #r2c3 { background: #0b0; } #r2c4 { background: #0f0; } </style> </head> <body> <table> <tr> <td id="r1c1"></td> <td id="r1c2"></td> <td id="r1c3"></td> <td id="r1c4"></td> </tr> <tr> <td id="r2c1"></td> <td id="r2c2"></td> <td id="r2c3"></td> <td id="r2c4"></td> </tr> </table> </body> </html>