CodeLab
Tutorials For Everyone
Run
<!Doctype HTML> <html> <head> <title>CSS Tables - Caption Side</title> <style> table, td{ border: 1px solid #000; } table{ border-spacing: 20px; } #table1{ caption-side: top; } #table2{ caption-side: bottom; } </style> </head> <body> <p>We can define caption Placement for the tables as follows.</p> <h2>CSS table caption side: Top</h2> <table style="width: 100%;" id="table1"> <caption style="background:#ddd;padding: 10px;">Users Ids and Passwords</caption> <tr> <th>User</th> <th>ID</th> <th>Password</th> </tr> <tbody> <tr> <td>joh</td> <td>john_123</td> <td>iAMjon_123</td> </tr> <tr> <td>Nikita</td> <td>niki_007</td> <td>007_niki</td> </tr> <tr> <td>Maria</td> <td>maria</td> <td>maria-9987</td> </tr> <tr> <td>Adam</td> <td>adam187</td> <td>noBodyLikesMe_187</td> </tr> </tbody> </table> <h2>CSS table caption side: Bottom</h2> <table style="width: 100%;" id="table2"> <caption style="background:#ddd;padding: 10px;">Users Ids and Passwords</caption> <tr> <th>User</th> <th>ID</th> <th>Password</th> </tr> <tbody> <tr> <td>joh</td> <td>john_123</td> <td>iAMjon_123</td> </tr> <tr> <td>Nikita</td> <td>niki_007</td> <td>007_niki</td> </tr> <tr> <td>Maria</td> <td>maria</td> <td>maria-9987</td> </tr> <tr> <td>Adam</td> <td>adam187</td> <td>noBodyLikesMe_187</td> </tr> </tbody> </table> </body> </html>