How to Center a Table in a div horizontally using CSS?
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<html> <head> <title>How to center a table in div BY T4Tutorials.com</title> <style type="text/css"> #tblOne, tr, td { width:300px; margin:1 auto; border: solid 1px green; } #divOne { width:400px; text-align:center; border:dotted 1px green; } </style> </head> <body> <div id="divOne"> <table id="tblOne"> <tr> <td>T4TUTORIALS</td> <td>T4TUTORIALS</td> <td>T4TUTORIALS</td> </tr> <tr> <td>T4TUTORIALS</td> <td>T4TUTORIALS</td> <td>T4TUTORIALS</td> </tr> </table> </div> </body> </html> |
How to Center a Table in a span horizontally using CSS?
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<html> <head> <title>How to center a table in div BY T4Tutorials.com</title> <style type="text/css"> #firsttable, tr, td { width
:500px; margin:1 auto; border: solid 2px red; } #firstdiv { width:500px; text-align:center; border:dashed 2px red; } </style> </head> <body> <span id="firstdiv"> <table id="firsttable"> <tr> <td>T4TUTORIALS</td> <td>T4TUTORIALS</td> <td>T4TUTORIALS</td> </tr> <tr> <td>T4TUTORIALS</td> <td>T4TUTORIALS</td> <td>T4TUTORIALS</td> </tr>
</table> </span> </body> </html> |
How to Center a Table in a div vertically using CSS?
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 |
<html> <head> <title>How to center a table in div vertically BY T4Tutorials.com</title> <style type="text/css"> body { margin : 0; } .main { position : absolute; display: table; width: 50%; height: 50%; background: red; } .inside { display: table-cell; vertical-align: middle; text-align: center; } .demo { display: inline-block; background: red; padding : 30px; border : 1px solid red; } table, tr, td { border: 1px solid green; } </style> </head> <body> <div class="main"> <div class="inside"> <div class="demo"> <em>Data :</em> <table> <tr> <th>T4TUTORIALS</th> <th>T4TUTORIALS</th> </tr> <tr> <td>T4TUTORIALS</td> <td>T4TUTORIALS</td> </tr> <tr> <td>T4TUTORIALS</td> <td>T4TUTORIALS</td> </tr> <tr> <td>T4TUTORIALS</td> <td>T4TUTORIALS</td> </tr> </table> </div> </div> </div> </body> </html> |