Skip to main content
Participant
December 21, 2017
Answered

Tabelle absolut zentrieren

  • December 21, 2017
  • 2 replies
  • 538 views

Hallo zusammen,

trotz trotz größter Mühen konnte ich eine Tabelle nicht horizontal und vertikal auf der Seite zentrieren.

Kann jemand helfen?

Siehe Code

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>AchterJuli</title>
<style>
.zentrierte-tabelle {
align-content: center;
width: 100%;
vertical-align: middle;
margin-left: auto;
margin-right: auto;
text-align: center;
margin-top: auto;
margin-bottom: auto;
}
</style>
</head>
<body>
<div class="zentrierte-tabelle">
<table align="center" width="640" border="1" cellspacing="1" cellpadding="1">
  <tbody>
   <tr>
   <td> </td>
   </tr>
   <tr>
   <td> </td>
   </tr>
   <tr>
   <td> </td>
   </tr>
  </tbody>
</table>
</div>
</body>
</html>
    This topic has been closed for replies.
    Correct answer Nancy OShea

    Vertically & Horizontally Centered Table:

    ========================

    <!doctype html>

    <html lang="en">

    <head>

    <meta charset="utf-8">

    <title>Vertically Centered Table</title>

    <style>

    #center {

        position: absolute;

        top: 25%;

        left: 25%;

        width: 50%;

        height: 50%;

        text-align: center;

        border: 2px groove #CCC;

    }

    </style>

    </head>

    <body>

    <table id="center" border="2" cellspacing="1" cellpadding="5">

    <tbody>

    <tr>

    <th scope="col">Heading</th>

    <th scope="col">Heading</th>

    <th scope="col">Heading;</th>

    </tr>

    <tr>

    <td>something</td>

    <td>something</td>

    <td>something</td>

    </tr>

    <tr>

    <td>something</td>

    <td>something</td>

    <td>something</td>

    </tr>

    <tr>

    <td>something</td>

    <td>something</td>

    <td>something</td>

    </tr>

    </tbody>

    </table>

    </body>

    </html>

    2 replies

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity ExpertCorrect answer
    Community Expert
    December 21, 2017

    Vertically & Horizontally Centered Table:

    ========================

    <!doctype html>

    <html lang="en">

    <head>

    <meta charset="utf-8">

    <title>Vertically Centered Table</title>

    <style>

    #center {

        position: absolute;

        top: 25%;

        left: 25%;

        width: 50%;

        height: 50%;

        text-align: center;

        border: 2px groove #CCC;

    }

    </style>

    </head>

    <body>

    <table id="center" border="2" cellspacing="1" cellpadding="5">

    <tbody>

    <tr>

    <th scope="col">Heading</th>

    <th scope="col">Heading</th>

    <th scope="col">Heading;</th>

    </tr>

    <tr>

    <td>something</td>

    <td>something</td>

    <td>something</td>

    </tr>

    <tr>

    <td>something</td>

    <td>something</td>

    <td>something</td>

    </tr>

    <tr>

    <td>something</td>

    <td>something</td>

    <td>something</td>

    </tr>

    </tbody>

    </table>

    </body>

    </html>

    Nancy O'Shea— Product User & Community Expert
    Participant
    December 22, 2017

    Great. That worked just fine!

    B i r n o u
    Legend
    December 21, 2017

    does this link will help you

    How to Center in CSS