Skip to main content
Participant
December 21, 2017
Answered

Tabelle absolut zentrieren

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 is closed to new replies. Start a new post to keep the conversation going.
    Nancy OShea
    Nancy OSheaCorrect 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

    3 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>

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

    Great. That worked just fine!

    Translate
    B i r n o u
    Legend
    December 21, 2017

    does this link will help you

    How to Center in CSS

    Translate