Back
Syntax
Study
Editor
Mode:
HTML
CSS
JavaScript
PHP
Reset
Run »
HTML / CSS / JS
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Table Headers</title> <style> table { border-collapse: collapse; width: 100%; } th, td { border: 1px solid #aaa; padding: 8px; } thead { background: #333; color: white; } tfoot { background: #f5f5f5; font-weight: bold; } tbody tr:nth-child(even) { background: #fafafa; } </style> </head> <body> <table> <thead> <tr> <th scope="col">Product</th> <th scope="col">Qty</th> <th scope="col">Price</th> </tr> </thead> <tbody> <tr> <th scope="row">Widget A</th> <td>3</td> <td>$9.99</td> </tr> <tr> <th scope="row">Widget B</th> <td>1</td> <td>$24.99</td> </tr> </tbody> <tfoot> <tr> <td colspan="2">Total</td> <td>$54.96</td> </tr> </tfoot> </table> </body> </html>
Result
Open