How to center a table in the screen html?

Question

I have this table with some data

I want it to be it in the center of the screen. How do I do that in CSS? I have tried margin: 2px auto; and stuff, but they just shrink the size of the table?

Here's my code

@import url('https://fonts.googleapis.com/css2?family=Open+Sans&family=Poppins:wght@300;500&family=Roboto+Mono:wght@700&family=Smooch+Sans:wght@300;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Anek+Latin:wght@600&family=Open+Sans&family=Poppins:wght@300;500&family=Roboto+Mono:wght@700&family=Smooch+Sans:wght@300;900&display=swap');
td {
  font-family: 'Anek Latin', sans-serif;
  border: 2px solid white;
  background-color: rgba(43, 215, 52, 0.606);
  border-radius: 7px;
  outline: #8B8000;
  background-image: linear-gradient(rgba(43, 215, 52, 0.606), green, olive, #8B8000, #676d42);
}

th {
  border: 2px solid rgba(158, 176, 114, 0.238);
  background-color: rgba(155, 205, 54, 0.793);
  background-blend-mode: multiply;
  background-image: linear-gradient(olive, #4b5320, #676d42, #8B8000, #5e6828);
  font-family: 'Anek Latin', sans-serif;
  border-radius: 7px;
  outline: black;
}

table {
  border: 1px solid white;
  margin-left: auto;
  margin-right: auto;
  border-collapse: collapse;
  width: 500px;
  text-align: center;
  font-size: 20px;
  text-align: center;
}

<div>
  <table>
    <tr>
      <th colspan="11">Student's Name</th>
      <th colspan="3">Roll no.</th>
      <th colspan="3">Marks Obtained (out of 720)</th>
    </tr>
    <tr>
      <td colspan="11">SOYEB AFTAB</td>
      <td colspan="3">5049</td>
      <td colspan="3">720</td>
    </tr>
    <tr>
      <td colspan="11">AKANSHA SINGH</td>
      <td colspan="3">1083</td>
      <td colspan="3">720</td>
    </tr>
    <tr>
      <td colspan="11"><small>TUMMALA SNIKITHA</small></td>
      <td colspan="3">2291</td>
      <td colspan="3">715</td>
    </tr>
    <tr>
      <td colspan="11">VINEET SHARMA</td>
      <td colspan="3">5561</td>
      <td colspan="3">715</td>
    </tr>
    <tr>
      <td colspan="11">KARTHIK REDDY</td>
      <td colspan="3">4153</td>
      <td colspan="3">710</td>
    </tr>
    <tr>
      <td colspan="11">GURIKIRAT SINGH</td>
      <td colspan="3">9201</td>
      <td colspan="3">624</td>
    </tr>
    <tr>
      <td colspan="11">AYSHA SINGH</td>
      <td colspan="3">1134</td>
      <td colspan="3">555</td>
    </tr>
    <tr>
      <td colspan="11">SRIJAN REDDY</td>
      <td colspan="3">3171</td>
      <td colspan="3">549</td>
    </tr>
    <tr>
      <td colspan="11">AMAN SANNI</td>
      <td colspan="3">4278</td>
      <td colspan="3">500</td>
    </tr>
  </table>
  <div>

I guess the margin thing doesn't work because of the div? Should I remove the div or is there a way to center it with the div?

`table{margin: 2px auto;}` should work,please provide a [minimal reproductible example](https://stackoverflow.com/help/minimal-reproducible-example) — Cédric, Jun 24 '22 at 10:14
Looks like it is in the center to me. Equal margins on the left and the right. — Quentin, Jun 24 '22 at 10:22
If you are trying to ask how to put things in the vertical middle (and not horizontally which is what most people mean when they say center) then https://stackoverflow.com/questions/396145/how-can-i-vertically-center-a-div-element-for-all-browsers-using-css is a duplicate. — Quentin, Jun 24 '22 at 10:29
I am not talking about horizontal and vertical, I want it to be in the center of webpage. — Debarka Naskar, Jun 24 '22 at 10:32
@DebarkaNaskar — Umm. What? I don't think you understand the meaning of the words horizontal and vertical. You can't centre something without doing so along some axis (and it isn't like there is any other content on the page for you to centre it along the z-axis!) — Quentin, Jun 24 '22 at 10:33
Nah, leave my dumb comment. Is there a way to adjust the x and y pos of my table? — Debarka Naskar, Jun 24 '22 at 10:36
So you *do* mean the vertical. I pointed you at a duplicate question which covers that two comments ago. — Quentin, Jun 24 '22 at 10:38
I don't understand what you are trying to say with vertical and horizontal. I just wanted to know how to change the x and y positions of a table. — Debarka Naskar, Jun 24 '22 at 10:40

adrianMoskal · Accepted Answer · 2022-06-24T10:55:39.317

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Open+Sans&family=Poppins:wght@300;500&family=Roboto+Mono:wght@700&family=Smooch+Sans:wght@300;900&display=swap');
        @import url('https://fonts.googleapis.com/css2?family=Anek+Latin:wght@600&family=Open+Sans&family=Poppins:wght@300;500&family=Roboto+Mono:wght@700&family=Smooch+Sans:wght@300;900&display=swap');
        td {
          font-family: 'Anek Latin', sans-serif;
          border: 2px solid white;
          background-color: rgba(43, 215, 52, 0.606);
          border-radius: 7px;
          outline: #8B8000;
          background-image: linear-gradient(rgba(43, 215, 52, 0.606), green, olive, #8B8000, #676d42);
        }

        th {
          border: 2px solid rgba(158, 176, 114, 0.238);
          background-color: rgba(155, 205, 54, 0.793);
          background-blend-mode: multiply;
          background-image: linear-gradient(olive, #4b5320, #676d42, #8B8000, #5e6828);
          font-family: 'Anek Latin', sans-serif;
          border-radius: 7px;
          outline: black;
        }

        table {
          border: 1px solid white;
          /* margin-left: auto; */
          /* margin-right: auto; */
          border-collapse: collapse;
          width: 500px;
          text-align: center;
          font-size: 20px;
          text-align: center;
        }

        .container {
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <table>
          <tr>
            <th colspan="11">Student's Name</th>
            <th colspan="3">Roll no.</th>
            <th colspan="3">Marks Obtained (out of 720)</th>
          </tr>
          <tr>
            <td colspan="11">SOYEB AFTAB</td>
            <td colspan="3">5049</td>
            <td colspan="3">720</td>
          </tr>
          <tr>
            <td colspan="11">AKANSHA SINGH</td>
            <td colspan="3">1083</td>
            <td colspan="3">720</td>
          </tr>
          <tr>
            <td colspan="11"><small>TUMMALA SNIKITHA</small></td>
            <td colspan="3">2291</td>
            <td colspan="3">715</td>
          </tr>
          <tr>
            <td colspan="11">VINEET SHARMA</td>
            <td colspan="3">5561</td>
            <td colspan="3">715</td>
          </tr>
          <tr>
            <td colspan="11">KARTHIK REDDY</td>
            <td colspan="3">4153</td>
            <td colspan="3">710</td>
          </tr>
          <tr>
            <td colspan="11">GURIKIRAT SINGH</td>
            <td colspan="3">9201</td>
            <td colspan="3">624</td>
          </tr>
          <tr>
            <td colspan="11">AYSHA SINGH</td>
            <td colspan="3">1134</td>
            <td colspan="3">555</td>
          </tr>
          <tr>
            <td colspan="11">SRIJAN REDDY</td>
            <td colspan="3">3171</td>
            <td colspan="3">549</td>
          </tr>
          <tr>
            <td colspan="11">AMAN SANNI</td>
            <td colspan="3">4278</td>
            <td colspan="3">500</td>
          </tr>
        </table>
        <div>
</body>
</html>

Add class to your container div:

<div class="container">
        <table>

Then just remove unnecessary margins in table and use container as flex (you need to setup height have vertical alignment work) using this lines:

table {
  border: 1px solid white;
  /* margin-left: auto; */
  /* margin-right: auto; */
  border-collapse: collapse;
  width: 500px;
  text-align: center;
  font-size: 20px;
  text-align: center;
}

.container {
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100vh;
}

score -3 · Answer 2 · edited Jun 24 '22 at 10:31

-3

  <div style="width: 100%; text-align: center;">
      <table>
        <tr>
          <th colspan="11">Student's Name</th>
          <th colspan="3">Roll no.</th>
          <th colspan="3">Marks Obtained (out of 720)</th>
        </tr>
       ...
      </table>
      <div>

edited Jun 24 '22 at 10:31

Quentin

914,110
126
1,211
1,335

answered Jun 24 '22 at 10:30

adis

1
2

I converted your code into a live demo. It doesn't work. The table remains left aligned. – Quentin Jun 24 '22 at 10:31
last row: , not
. my error...
– adis Jun 24 '22 at 10:44
and it's ok, i tested – adis Jun 24 '22 at 10:45
Seriously, you can click "Run code snippet" in your answer and see that it **does not work**. It is not "ok". – Quentin Jun 24 '22 at 10:46
...

Student's Name Roll no. Marks Obtained (out of 720)
– adis Jun 24 '22 at 10:48
You can edit your answer to fix that typo and see that it **still** does not work. – Quentin Jun 24 '22 at 10:49
I copy from your text, and last row, you have "
", and must be "
". If you put , to close that opened
, it will work.
– adis Jun 24 '22 at 10:50
https://www.tutorialrepublic.com/codelab.php – adis Jun 24 '22 at 10:50
You have not copied from my text. I haven't written any code on this question or your answer. – Quentin Jun 24 '22 at 10:50
That link doesn't appear remotely relevant. – Quentin Jun 24 '22 at 10:51
...
...
– adis Jun 24 '22 at 10:52
1

Spewing contextless code into the comments isn't going to fix the live demo in your answer. – Quentin Jun 24 '22 at 10:53

How to center a table in the screen html?

2 Answers2