Format <td> table with CSS

Asked

Viewed 27 times

-2

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: hsl(233, 47%, 7%);
}

#container {
    background-color: hsl(244, 38%, 16%);
    margin-top: 150px;
    margin-right: 610px;
    margin-left: 224px;
    height: 380px;
    padding: 80px 80px 80px 80px;
    border-radius: 5px;
}

.img {
    border-radius: 5px;
    position: absolute;
    bottom: 30px;
    right: 159px;
    top: 150px;
}

#font, #font3 {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    color: white;
    padding-top: 5px;
}

h1 {
    font-size: 35px;
    margin-top: -30px;
}

p {
    margin-top: 28px;
    font-size: 14px;
}

table {
    margin-top: 60px;
    margin-left: -20px;
}

th {
    font-size: 20px;
}

#font2, #font4 {
    font-family: 'Lexend Deca', sans-serif;
    font-weight: 400;
    color: hsla(0, 0%, 100%, 0.6);
    font-size: 15px;
}

span {
    color: hsl(277, 64%, 61%);
}
<!DOCTYPE html>
<html lang="pt-br">

<head>

  <meta charset="UTF-8">

   <!-- displays site properly based on user's device -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
  <link rel="stylesheet" href="style.css">
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Lexend+Deca&display=swap" rel="stylesheet">
  
  <title>Frontend Mentor | Stats preview card component</title>

  <!-- Feel free to remove these styles or customise in your own stylesheet  -->
  <style>
    .attribution { font-size: 11px; text-align: center; }
    .attribution a { color: hsl(228, 45%, 44%); }
  </style>

</head>

<body>

<div id="container">

  <header id="font">
      <h1>Get <span>insights</span> that help your business grow.</h1>
  </header>

<main>

  <section>
    <div id="font2">
      <p>Discover the benefits of data analytics and make better decisions regarding revenue, customer 
      experience, and overall efficiency.</p>
    </div>
  </section>
</main>

<section class="bg">

  <table>
<thead>
  <tr id="font3">
    <th colspan="1">10k+</th>
    <th colspan="2">314</th>
    <th>12m+</th>
  </tr>
</thead>

<tbody>
  <tr id="font4">
   <td>companies</td>
   <td>templates</td>
   <td>queries</td> 
  </tr>
</tbody>

  </table>

</section>

  
   <!-- <footer>
      <div class="attribution"></div>
        Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
        Coded by <a href="#">Pedro Lucas</a>
      </div>
    </footer> -->

</div>

<span class="img">
  <img src="./images/image-header-desktop.jpg" alt="Image desktop" width="460">
</span>

</body>

</html>

I want to edit table tags in HTML, increasing the spacing between tag contents and aligning with the above content;

html css html5 css3 table

1 answer

0

We can remove the margin and align the text on the left. Also pay attention to colspan.

table {
    margin-top: 60px;
    text-align: left;
}

Browser other questions tagged html css html5 css3 table

You are not signed in. Login or sign up in order to post.