Generador de estilo de tabla

head1	head2	head3	head4	head5
« 1 2 3 4 »
cell1_1	cell2_1	cell3_1	cell4_1	cell5_1
cell1_2	cell2_2	cell3_2	cell4_2	cell5_2
cell1_3	cell2_3	cell3_3	cell4_3	cell5_3
cell1_4	cell2_4	cell3_4	cell4_4	cell5_4
cell1_5	cell2_5	cell3_5	cell4_5	cell5_5

Código HTML:

<table class="greenTable"> <thead> <tr> <th>head1</th> <th>head2</th> <th>head3</th> <th>head4</th> <th>head5</th> </tr> </thead> <tfoot> <tr> <td colspan="5"> <div class="links"><a href="#">«</a> <a class="active" href="#">1</a> <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#">»</a></div> </td> </tr> </tfoot> <tbody> <tr> <td>cell1_1</td> <td>cell2_1</td> <td>cell3_1</td> <td>cell4_1</td> <td>cell5_1</td> </tr> <tr> <td>cell1_2</td> <td>cell2_2</td> <td>cell3_2</td> <td>cell4_2</td> <td>cell5_2</td> </tr> <tr> <td>cell1_3</td> <td>cell2_3</td> <td>cell3_3</td> <td>cell4_3</td> <td>cell5_3</td> </tr> <tr> <td>cell1_4</td> <td>cell2_4</td> <td>cell3_4</td> <td>cell4_4</td> <td>cell5_4</td> </tr> <tr> <td>cell1_5</td> <td>cell2_5</td> <td>cell3_5</td> <td>cell4_5</td> <td>cell5_5</td> </tr> </tbody> </table>
Código CSS:

<style> font-family: Georgia, serif; border: 6px solid #24943A; background-color: #D4EED1; width: 100%; text-align: center; } table.greenTable td, table.greenTable th { border: 1px solid #24943A; padding: 3px 2px; } table.greenTable tbody td { font-size: 13px; } table.greenTable thead { background: #24943A; background: -moz-linear-gradient(top, #5baf6b 0%, #3a9e4d 66%, #24943A 100%); background: -webkit-linear-gradient(top, #5baf6b 0%, #3a9e4d 66%, #24943A 100%); background: linear-gradient(to bottom, #5baf6b 0%, #3a9e4d 66%, #24943A 100%); border-bottom: 0px solid #444444; } table.greenTable thead th { font-size: 19px; font-weight: bold; color: #F0F0F0; text-align: left; border-left: 2px solid #24943A; } table.greenTable thead th:first-child { border-left: none; } table.greenTable tfoot { font-size: 13px; font-weight: bold; color: #F0F0F0; background: #24943A; background: -moz-linear-gradient(top, #5baf6b 0%, #3a9e4d 66%, #24943A 100%); background: -webkit-linear-gradient(top, #5baf6b 0%, #3a9e4d 66%, #24943A 100%); background: linear-gradient(to bottom, #5baf6b 0%, #3a9e4d 66%, #24943A 100%); border-top: 1px solid #24943A; } table.greenTable tfoot td { font-size: 13px; } table.greenTable tfoot .links { text-align: right; } table.greenTable tfoot .links a{ display: inline-block; background: #FFFFFF; color: #24943A; padding: 2px 8px; border-radius: 5px; } </style>


Fuente;
https://divtable.com/table-styler/