HTML CSS examples for CSS Widget:Table
Create a table with sub-headings and side-headings
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> th, td { font-weight:normal; padding:6px; width:121px; vertical-align:top; } th {<!-- w w w .j a va2 s .c o m--> background:Chartreuse; } tr + tr th, tbody th { background:yellow; } tr + tr, tbody { text-align:left } table, th, td { border:solid 2px; border-collapse:collapse; table-layout:fixed; } </style> </head> <body> <table> <thead> <tr> <th colspan="2">Lorem </th> <th colspan="2">Lorem ip</th> <th colspan="3">Lorem ipsum dolor s</th> <th colspan="3">Lorem </th> <th>Lorem </th> </tr> <tr> <th>Lorem ipsu</th> <th>Lorem ipsu</th> <th>Lorem ipsu</th> <th>Lorem ipsu</th> <th>Lorem ipsu</th> <th>Lorem ipsu</th> <th>Lorem ipsu</th> <th>Lorem ipsu</th> <th>Lorem ipsu</th> <th>Lorem ipsu</th> <th>Lorem ipsu</th> </tr> </thead> <tbody> <tr> <th>Lorem </th> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <th>Lorem </th> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <th>Lorem </th> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <th>Lorem </th> <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>