What is causing my table to refuse to center?

Question

What is causing my table to refuse to center?

I'm having trouble keeping my table of images contained within the content area of my page. Additionally, I can't seem to get my footer to stay at the bottom of the page. Take a look at this image for reference:

body {
  margin: 0px;
  padding: 0px;
}

.mainwrapper {
  width: 1024px;
  margin: 0 auto;
}

.pagebanner {
  height: 250px;
  margin: 0;
}

.pagebanner img {
  width: 100%;
  height: 100%;
}

.main {
  margin: 0;
}

.navbar {
  background-color: brown;
  min-height: 500px;
  width: 20%;
  float: left;
}

.navbar li {
  list-style: none;
  margin-bottom: 15px;
}

.navbar a {
  color: #fff;
  font-size: 20px;
}

.headersd {
  width: 80%;
  float: left;
  padding: 0;
  min-height: 500px;
}

.header {
  background-color: #000;
  text-align: center;
}

.header h1 {
  color: #fff;
  margin: 0;
}

.subheading {
  background-color: #f8d631;
  text-align: center;
}

.subheading h2 {
  background-color: #f8d631;
  margin: 0;
}

.table {
  align: center;
  padding-left: 50px border: 20px;
}

.footer {
  background-color: darkgreen;
  height: 20px;
  margin-bottom: 0px;
}

<div class="mainwrapper">
  <div class="pagebanner">
    <img src="https://cdn-images-1.medium.com/max/1400/1*278tqw9zNPe2WCAz29Wzdw.jpeg" alt="PageBanner">
  </div>
  <!--PageBanner-->

  <div class="main">
    <div class="navbar">
      <ul>
        <li>
          <a href="#">Information</a>
        </li>
        <li>
          <a href="#">Home</a>
        </li>
      </ul>
    </div>
    <!--Navbar-->

    <div class="headers">
      <div class="header">
        <h1>The Club Site</h1>
      </div>
      <!--Main page heading section-->

      <div class="subheading">
        <h2>Members Prices</h2>
      </div>
      <!--Sub heading section-->
    </div>

  </div>
  <div class="content">
    <div class="table">
      <table>
        <th>Discount Prices</th>
        <tr>
          <td><img src="https://imgur.com/S1JVX6K" </td>
            <td><img src="https://imgur.com/uzkB81W" </td>
              <td><img src="https://imgur.com/YvnOW4s" </td></tr>
        <tr>
          <td><img src="https://imgur.com/f2wnDXT" </td>
            <td><img src="https://imgur.com/XiBYnS2" </td>
              <td><img src="https://imgur.com/mGcCorr" </td></tr>
      </table>
    </div>
    <!--Table Section-->

  </div>
  <!--Content section-->

  <div class="footer">
    <footer>wsrgferg</footer>
  </div>
  <!--Footer section-->
</div>
<!--Endwrapper-->

html css html-table footer

Answer 1

Answer №1

Incorporate margin:0 auto into the table element, update th to h3, and set h3 alignment to text-align:center.

<head>
    <meta charset="utf-8" />
    <title>Bazaar Ceramics</title;

<style>

body {
    margin: 0px;
    padding: 0px;
}

.mainwrapper {
    width: 1024px;
    margin: 0 auto;
}

.pagebanner {
    height: 250px;
    margin: 0;
}

.pagebanner img {
    width: 100%;
    height: 100%;
}

.main {
    margin: 0;
}

.navbar {
    background-color: brown;
    min-height: 500px;
    width: 20%;
    float: left;
}

.navbar li {
    list-style: none;
    margin-bottom: 15px;
}

.navbar a {
    color: #fff;
    font-size: 20px;
}

.headersd {
    width: 80%;
    float: left;
    padding: 0;
    min-height: 500px;
}

.header {
    background-color: #000;
    text-align: center;
}

.header h1 {
    color: #fff;
    margin: 0;
}

.subheading {
    background-color: #f8d631;
    text-align: center;
}

.subheading h2 {
    background-color: #f8d631;
    margin: 0;
}

.table {
    align: center;
    padding-left:50px
    border: 20px;
    }
.footer {
    background-color: darkgreen;
    height:20px;
    margin-bottom:0px;
}   
</style>

</head>

<body>

    <div class="mainwrapper">
        <div class="pagebanner">
          <img src="https://cdn-images-1.medium.com/max/1400/1*278tqw9zNPe2WCAz29Wzdw.jpeg" alt="PageBanner">
        </div><!--PageBanner-->

    <div class="main">
        <div class="navbar">
            <ul>
                <li>
                    <a href="#">Information</a>
                </li>
                <li>
                    <a href="#">Home</a>
                </li>
            </ul>
        </div><!--Navbar-->

    <div class="headers">
    <div class="header">
            <h1>The Club Site</h1>
    </div><!--Main page heading section-->

    <div class="subheading">
            <h2>Members Prices</h2>
    </div><!--Sub heading section-->
    </div>

    </div>
    <div class="content">
        <div class="table"> 
            <table style="margin:0 auto;" >
            <h3 style="text-align:center;">Discount Prices</h3>
            <tr><td><img src="HTML Pract A/images/smaller/bcpot002_smaller.jpg"</td><td><img src="HTML Pract A/images/smaller/bcpot006_smaller.jpg"</td><td><img src="HTML Pract A/images/smaller/bcpot013_smaller.jpg"</td></tr>
            <tr><td><img src="HTML Pract A/images/smaller/bcpot002_smaller.jpg"</td><td><img src="HTML Pract A/images/smaller/bcpot006_smaller.jpg"</td><td><img src="HTML Pract A/images/smaller/bcpot013_smaller.jpg"</td></tr>
            </table>
        </div><!--Table Section-->  

    </div><!--Content section-->

    <div class="footer">
        <footer>wsrgferg</footer>
    </div><!--Footer section-->
    </div><!--Endwrapper-->

</body>



</html>

Answer 2

Incorporate margin:0 auto into the table element, update th to h3, and set h3 alignment to text-align:center.

<head>
    <meta charset="utf-8" />
    <title>Bazaar Ceramics</title;

<style>

body {
    margin: 0px;
    padding: 0px;
}

.mainwrapper {
    width: 1024px;
    margin: 0 auto;
}

.pagebanner {
    height: 250px;
    margin: 0;
}

.pagebanner img {
    width: 100%;
    height: 100%;
}

.main {
    margin: 0;
}

.navbar {
    background-color: brown;
    min-height: 500px;
    width: 20%;
    float: left;
}

.navbar li {
    list-style: none;
    margin-bottom: 15px;
}

.navbar a {
    color: #fff;
    font-size: 20px;
}

.headersd {
    width: 80%;
    float: left;
    padding: 0;
    min-height: 500px;
}

.header {
    background-color: #000;
    text-align: center;
}

.header h1 {
    color: #fff;
    margin: 0;
}

.subheading {
    background-color: #f8d631;
    text-align: center;
}

.subheading h2 {
    background-color: #f8d631;
    margin: 0;
}

.table {
    align: center;
    padding-left:50px
    border: 20px;
    }
.footer {
    background-color: darkgreen;
    height:20px;
    margin-bottom:0px;
}   
</style>

</head>

<body>

    <div class="mainwrapper">
        <div class="pagebanner">
          <img src="https://cdn-images-1.medium.com/max/1400/1*278tqw9zNPe2WCAz29Wzdw.jpeg" alt="PageBanner">
        </div><!--PageBanner-->

    <div class="main">
        <div class="navbar">
            <ul>
                <li>
                    <a href="#">Information</a>
                </li>
                <li>
                    <a href="#">Home</a>
                </li>
            </ul>
        </div><!--Navbar-->

    <div class="headers">
    <div class="header">
            <h1>The Club Site</h1>
    </div><!--Main page heading section-->

    <div class="subheading">
            <h2>Members Prices</h2>
    </div><!--Sub heading section-->
    </div>

    </div>
    <div class="content">
        <div class="table"> 
            <table style="margin:0 auto;" >
            <h3 style="text-align:center;">Discount Prices</h3>
            <tr><td><img src="HTML Pract A/images/smaller/bcpot002_smaller.jpg"</td><td><img src="HTML Pract A/images/smaller/bcpot006_smaller.jpg"</td><td><img src="HTML Pract A/images/smaller/bcpot013_smaller.jpg"</td></tr>
            <tr><td><img src="HTML Pract A/images/smaller/bcpot002_smaller.jpg"</td><td><img src="HTML Pract A/images/smaller/bcpot006_smaller.jpg"</td><td><img src="HTML Pract A/images/smaller/bcpot013_smaller.jpg"</td></tr>
            </table>
        </div><!--Table Section-->  

    </div><!--Content section-->

    <div class="footer">
        <footer>wsrgferg</footer>
    </div><!--Footer section-->
    </div><!--Endwrapper-->

</body>



</html>

Answer 3

Answer №2

body {
  margin: 0px;
  padding: 0px;
}

.mainwrapper {
  width: 1024px;
  margin: 0 auto;
}

.pagebanner {
  height: 250px;
  margin: 0;
}

.pagebanner img {
  width: 100%;
  height: 100%;
}

.main {
  margin: 0;
}

.navbar {
  background-color: brown;
  min-height: 500px;
  width: 20%;
  float: left;
}

.navbar li {
  list-style: none;
  margin-bottom: 15px;
}

.navbar a {
  color: #fff;
  font-size: 20px;
}

.headersd {
  width: 80%;
  float: left;
  padding: 0;
  min-height: 500px;
}

.header {
  background-color: #000;
  text-align: center;
}

.header h1 {
  color: #fff;
  margin: 0;
}

.subheading {
  background-color: #f8d631;
  text-align: center;
}

.subheading h2 {
  background-color: #f8d631;
  margin: 0;
}

.table {
  align: center;
  padding-left: 50px border: 20px;
}

.footer {
  background-color: darkgreen;
  height: 20px;
  margin-bottom: 0px;
}

.content {
  min-height: 400px;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Bazaar Ceramics</title>
</head>

<body>

  <div class="mainwrapper">
    <div class="pagebanner">
      <img src="https://cdn-images-1.medium.com/max/1400/1*278tqw9zNPe2WCAz29Wzdw.jpeg" alt="PageBanner">
    </div>
    <!--PageBanner-->

    <div class="main">
      <div class="navbar">
        <ul>
          <li>
            <a href="#">Information</a>
          </li>
          <li>
            <a href="#">Home</a>
          </li>
        </ul>
      </div>
      <!--Navbar-->

      <div class="headers">
        <div class="header">
          <h1>The Club Site</h1>
        </div>
        <!--Main page heading section-->

        <div class="subheading">
          <h2>Members Prices</h2>
        </div>
        <!--Sub heading section-->
      </div>

    </div>
    <div class="content">
      <div class="table">
        <table style="margin:0 auto;">
          <h3 style="text-align:center;">Discount Prices</h3>
          <tr>
            <td><img src="HTML Pract A/images/smaller/bcpot002_smaller.jpg" </td>
              <td><img src="HTML Pract A/images/smaller/bcpot006_smaller.jpg" </td>
                <td><img src="HTML Pract A/images/smaller/bcpot013_smaller.jpg" </td></tr>
          <tr>
            <td><img src="HTML Pract A/images/smaller/bcpot002_smaller.jpg" </td>
              <td><img src="HTML Pract A/images/smaller/bcpot006_smaller.jpg" </td>
                <td><img src="HTML Pract A/images/smaller/bcpot013_smaller.jpg" </td></tr>
        </table>
      </div>
      <!--Table Section-->

    </div>
    <!--Content section-->

    <div class="footer">
      <footer>This is the Footer</footer>
    </div>
    <!--Footer section-->
  </div>
  <!--Endwrapper-->

</body>



</html>

If you set a fixed height for your .content, it will always take up that space and your footer will be positioned directly below it.

The issue with this approach is that if your content only occupies a small portion of the screen, your footer will appear right after it, creating a large empty space below. As more content is added, the footer will move down as needed to accommodate the additional content.

While this method may not be the most responsive, it provides a working solution. Suggestions for better responsiveness are welcome!

Answer 4

body {
  margin: 0px;
  padding: 0px;
}

.mainwrapper {
  width: 1024px;
  margin: 0 auto;
}

.pagebanner {
  height: 250px;
  margin: 0;
}

.pagebanner img {
  width: 100%;
  height: 100%;
}

.main {
  margin: 0;
}

.navbar {
  background-color: brown;
  min-height: 500px;
  width: 20%;
  float: left;
}

.navbar li {
  list-style: none;
  margin-bottom: 15px;
}

.navbar a {
  color: #fff;
  font-size: 20px;
}

.headersd {
  width: 80%;
  float: left;
  padding: 0;
  min-height: 500px;
}

.header {
  background-color: #000;
  text-align: center;
}

.header h1 {
  color: #fff;
  margin: 0;
}

.subheading {
  background-color: #f8d631;
  text-align: center;
}

.subheading h2 {
  background-color: #f8d631;
  margin: 0;
}

.table {
  align: center;
  padding-left: 50px border: 20px;
}

.footer {
  background-color: darkgreen;
  height: 20px;
  margin-bottom: 0px;
}

.content {
  min-height: 400px;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Bazaar Ceramics</title>
</head>

<body>

  <div class="mainwrapper">
    <div class="pagebanner">
      <img src="https://cdn-images-1.medium.com/max/1400/1*278tqw9zNPe2WCAz29Wzdw.jpeg" alt="PageBanner">
    </div>
    <!--PageBanner-->

    <div class="main">
      <div class="navbar">
        <ul>
          <li>
            <a href="#">Information</a>
          </li>
          <li>
            <a href="#">Home</a>
          </li>
        </ul>
      </div>
      <!--Navbar-->

      <div class="headers">
        <div class="header">
          <h1>The Club Site</h1>
        </div>
        <!--Main page heading section-->

        <div class="subheading">
          <h2>Members Prices</h2>
        </div>
        <!--Sub heading section-->
      </div>

    </div>
    <div class="content">
      <div class="table">
        <table style="margin:0 auto;">
          <h3 style="text-align:center;">Discount Prices</h3>
          <tr>
            <td><img src="HTML Pract A/images/smaller/bcpot002_smaller.jpg" </td>
              <td><img src="HTML Pract A/images/smaller/bcpot006_smaller.jpg" </td>
                <td><img src="HTML Pract A/images/smaller/bcpot013_smaller.jpg" </td></tr>
          <tr>
            <td><img src="HTML Pract A/images/smaller/bcpot002_smaller.jpg" </td>
              <td><img src="HTML Pract A/images/smaller/bcpot006_smaller.jpg" </td>
                <td><img src="HTML Pract A/images/smaller/bcpot013_smaller.jpg" </td></tr>
        </table>
      </div>
      <!--Table Section-->

    </div>
    <!--Content section-->

    <div class="footer">
      <footer>This is the Footer</footer>
    </div>
    <!--Footer section-->
  </div>
  <!--Endwrapper-->

</body>



</html>

If you set a fixed height for your .content, it will always take up that space and your footer will be positioned directly below it.

The issue with this approach is that if your content only occupies a small portion of the screen, your footer will appear right after it, creating a large empty space below. As more content is added, the footer will move down as needed to accommodate the additional content.

While this method may not be the most responsive, it provides a working solution. Suggestions for better responsiveness are welcome!

What is causing my table to refuse to center?

Answer №1

Answer №2

Similar questions

Tips for minimizing the dimensions of images in a slideshow within a gallery

Issue with Angular JS: Unable to remove uploaded files

Angular: module instantiation unsuccessful

url-resettable form

Encountered an unexpected character "<" while looking for an identifier in a React.js project

The wget tool is capable of downloading CSS files that contain @import rules, however it overlooks

Why isn't the page being redirected when attempting to use JavaScript with window.location and window.location.href?

Can $refs cause issues with interpolation?

The toggle checkbox feature in AngularJS seems to be malfunctioning as it is constantly stuck in the "off"

Discover the method for storing multiple values in local storage using a dictionary with JavaScript

Closing the space between navigation bar choices

Is there a way to have text appear in a popup when I reach it while scrolling?

A guide to implementing div wrapping in HTML

Nextjs exposes a bug in react-bootstrap's navbar component

Switching from jQuery to vanilla JavaScript, iterating through each HTML tag in a loop

The function TagBuilder.MergeAttributes is malfunctioning

Tips for presenting random images from an assortment of pictures on a webpage

Utilizing DOMStringMap data to populate CSS URLs

What is the best way to align the navbar items at the center in Bootstrap when mx-auto is not working?

How can we use JavaScript to close a dropdown menu when the user clicks outside of it?