How to center a table in the screen html?-CodePudding

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?

CodePudding user response：

see if this works:

<!DOCTYPE html>
<html>
    <head> 
        <meta charset="utf-8">
        <title>Demo</title>
    </head>
    <body>
        <div >#whatever your code is</div>
    </body>
    <style>
    .table {
        position: absolute;
        left: 50%;
    }
    </style>
</html>

Also, try giving us an example of your code in the future so we can answer your question better.

CodePudding user response：

You can try using the <center> element, heres how you use it:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Css Assignment 1</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;
        }
    </style>
</head>
<body>
 <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>
   </center>
</body>
</html>