<style> table, th, td { border: 2px solid #c00; border-collapse: collapse; } .test1 { caption-side: bottom;} .test2 { caption-side: top;} </style> <h2>caption-side: bottom</h2> <table class="test1"> <tr> <th>Example Text</th> <th>Example Text</th> <th>Example Text</th> </tr> <tr> <td>Example Text</td> <td>Example Text</td> <td>Example Text</td> </tr> <tr> <td>Example Text</td> <td>Example Text</td> <td>Example Text</td> </tr> <tr> <td>Example Text</td> <td>Example Text</td> <td>Example Text</td> </tr> <tr> <td>Example Text</td> <td>Example Text</td> <td>Example Text</td> </tr> </table> <h2>caption-side: top</h2> <table class="test2"> <tr> <th>Example Text</th> <th>Example Text</th> <th>Example Text</th> </tr> <tr> <td>Example Text</td> <td>Example Text</td> <td>Example Text</td> </tr> <tr> <td>Example Text</td> <td>Example Text</td> <td>Example Text</td> </tr> <tr> <td>Example Text</td> <td>Example Text</td> <td>Example Text</td> </tr> <tr> <td>Example Text</td> <td>Example Text</td> <td>Example Text</td> </tr> </table>