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

The process of creating a functional search bar in Django

A guide on utilizing Xpath to reference a tag within a class

Unlock the Potential of Spring REST-JWT-JavaScript for Seamless Transitions

Connect the CSS file in React index.html to the Flask backend

Enhancing the Syntax of If and If Else in Jquery Functions

What is causing the columns in Foundation 6 to not align next to each other?

Iterating through elements within a Div will retrieve the initial element exclusively

What is the preferred approach in JavaScript: having a single large file or multiple smaller files?

Retrieve the information from a website and display it on the current webpage using an ajax request

Angular - developing a custom web element to enhance the project

Is your PHP random advertisement feature malfunctioning?

Adjust the bootstrap switch component to be in the 'checked' state when the mode is set to Dark

Other options to consider besides using flex wrapping

Customize style with Dart programming language

On three out of five pages, Mozilla Firefox and Internet Explorer are causing extra spacing in my navigation section, yet not on every page

How can we use jQuery to change the format of a

The Google Visualization chart fails to display properly once CSS is applied

Guide on applying css to a single element while concealing another using Jquery

Master the art of manipulating tags in Django templates using JavaScript

Strange behavior in Internet Explorer when using jQuery to simulate a click on an input=file element