What is the best way to horizontally center my HTML tables and ensure that they all have uniform widths?

Question

What is the best way to horizontally center my HTML tables and ensure that they all have uniform widths?

I'm currently facing an issue where I'd like to center align all tables similar to the 'Ruby Table.' However, I'm unsure of how to achieve this.

You may also observe that some tables have varying widths. What CSS rule can I apply to adjust the width of the entire table so they are consistent?

Below is my HTML code:

<!DOCTYPE html>
<html>

<head>
  <title>Personal Bests</title>
  <link rel="stylesheet" type="text/css" href="css/home.css">
  <meta charset="UTF-8">
</head>

<body>
  <main>

   <div id="section">
      <article>
        <h2>FireFalcons1 Best Times</h2>
     <p>
    Below you will find all of my best times on Time Trials Max Speed (100%) and Story Mode (100%)
    </p>
    <p class="TA">
    TIME ATTACK - MAX SPEED (100%)
      </article>
    </div>

<!--Ruby HMTL Table-->

<table class="rubyTable">
  <tr>
    <th class="rubyHeader" colspan="6">Ruby Cup</th>
  </tr>
  
  <!-- More table content here -->
  
  </table>

<!--Sapphire HMTL Table-->

  <table class="sapphireTable">
    <!-- Sapphire table content goes here-->
  </table>

<!--End of Table-->
    <hr>
    <footer>
      <strong>
                Copyright &copy; 2016 Stephen Fawcett, All rights reserved
        </strong>
    </footer>
  </main>
</body>

</html>

And here is my CSS related to 'Personal Bests':

 
/* Personal Bests CSS */
.TA {
    /* Custom styles for TA */
}

.rubyTable {
    /* Styling for Ruby Table */

}
/* Additional CSS for other tables */

.tg .tg-mzmv {
    /* Styling for specific elements */
}

Please focus only on the CSS located under the "Personal Bests CSS" comment.

html css html-table

Answer 1

Answer №1

Here is a helpful suggestion:

.amethystTable, .topazTable, .opalTable, .rubyTable, .emeraldTable {
    width: 90%;
    margin: 0 auto;
}

Answer 2

Here is a helpful suggestion:

.amethystTable, .topazTable, .opalTable, .rubyTable, .emeraldTable {
    width: 90%;
    margin: 0 auto;
}

Answer 3

Answer №2

Starting off, it might be beneficial to end your

<p class="TA"> with a </p>,

This way, you can begin testing out your CSS styles and properties.

Answer 4

Starting off, it might be beneficial to end your

<p class="TA"> with a </p>,

This way, you can begin testing out your CSS styles and properties.

Answer 5

Answer №3

To horizontally center a static block-level element in CSS, you can utilize the margin:auto; property.

.rubyTable, .sapphireTable, .diamondTable {
    /* add any necessary table class names above */
    margin:auto;
}

Please note that in this shorthand version, no top or bottom margin is specified for clarity. It is recommended to refer to the documentation on Margin and shorthand CSS syntax.

This method automatically sets the left and right margins to centrally position the object, in this case, a table. Since tables are block-level elements by default, their width is 100%. Therefore, it's advisable to also specify a width value along with the margin property for values greater than zero.

For instance, if you want to assign a specific width and margin to ALL table objects, regardless of their class, you can target the table element type in your CSS:

table {
    width:80%;
    margin:auto; 
    min-width:300px; /* for mobile screens */
}

It's important to note that the reference to "table" in the above code does not have a preceding period (.), indicating that it targets an element rather than a class rule.

Optimizing Repetition:

Upon reviewing your question, it appears that there is a significant amount of repetition in your HTML code, such as having multiple instances of the same class name like rubyData scattered throughout. You can streamline this using CSS3 and the direct descendant selector (>).

.rubyTable > tr:nth-of-type(1n+3) > td:first-of-type {
    /* equivalent to .rubyTrack CSS properties */
}
.rubyTable > tr:nth-of-type(1n+3) > td:not(:first-of-type) {
    /* equivalent to .rubyData CSS properties */
}

The first rule targets the nth-of-type direct descendant within the .rubyTable class starting from the third occurrence. It then styles the first td element accordingly.

The second rule styles all subsequent td elements (excluding the first one) following the defined pattern. This approach eliminates the need for repetitive class assignments in your HTML markup.

By restructuring your code as demonstrated above, your HTML becomes more concise, organized, and easier to manage.

Answer 6

To horizontally center a static block-level element in CSS, you can utilize the margin:auto; property.

.rubyTable, .sapphireTable, .diamondTable {
    /* add any necessary table class names above */
    margin:auto;
}

Please note that in this shorthand version, no top or bottom margin is specified for clarity. It is recommended to refer to the documentation on Margin and shorthand CSS syntax.

This method automatically sets the left and right margins to centrally position the object, in this case, a table. Since tables are block-level elements by default, their width is 100%. Therefore, it's advisable to also specify a width value along with the margin property for values greater than zero.

For instance, if you want to assign a specific width and margin to ALL table objects, regardless of their class, you can target the table element type in your CSS:

table {
    width:80%;
    margin:auto; 
    min-width:300px; /* for mobile screens */
}

It's important to note that the reference to "table" in the above code does not have a preceding period (.), indicating that it targets an element rather than a class rule.

Optimizing Repetition:

Upon reviewing your question, it appears that there is a significant amount of repetition in your HTML code, such as having multiple instances of the same class name like rubyData scattered throughout. You can streamline this using CSS3 and the direct descendant selector (>).

.rubyTable > tr:nth-of-type(1n+3) > td:first-of-type {
    /* equivalent to .rubyTrack CSS properties */
}
.rubyTable > tr:nth-of-type(1n+3) > td:not(:first-of-type) {
    /* equivalent to .rubyData CSS properties */
}

The first rule targets the nth-of-type direct descendant within the .rubyTable class starting from the third occurrence. It then styles the first td element accordingly.

The second rule styles all subsequent td elements (excluding the first one) following the defined pattern. This approach eliminates the need for repetitive class assignments in your HTML markup.

By restructuring your code as demonstrated above, your HTML becomes more concise, organized, and easier to manage.

What is the best way to horizontally center my HTML tables and ensure that they all have uniform widths?

Answer №1

Answer №2

Answer №3

Optimizing Repetition:

Similar questions

Tips for incorporating images as radio buttons

Issue with drop-down menu functionality on mobile-friendly website

How can I customize the color of Chrome's default date and time picker to a different shade of blue?

Preventing data loss upon submitting a form (PHP)

Is the AngularJS Date property model sending an incorrect value to the server?

Tips for updating multiple bundled javascript files with webpack

When implementing CSS object-fit: contain on an image, it may result in empty spaces surrounding the image

As my character slides off the moving platform in this exciting Javascript canvas game, my heart

no visible text displayed within an input-label field

What is the correct method to sanitize the data obtained from a text area before inserting it back into the same text area?

Is there any method to avoid the hassle of constantly adjusting margins and paddings on my one-page website?

The markers on Google Maps are currently displaying in the wrong position, despite the latitude and longitude being correct

Modify the useRef value prior to the HTML rendering (React functional component)

Creating a table and filling it with data from any cell is a simple process

Covering the entire screen, the Div element takes up the entirety of

Make Fomantic-UI (Angular-JS) sidebar scroll independently

Tips for extracting text from a multiline tag using Selenium

What is the method to assign a value to ng-class in Angularjs?

Finding a specific cell in a Django HTML table: tips and tricks

Performance issues with jquery addClass and removeClass functions observed in Internet Explorer 11