can a table tag without a specified width still be successfully centered?

Question

can a table tag without a specified width still be successfully centered?

While learning a trick to center an element, I came across an interesting method. The suggestion was to place the ul element inside a table and set the table's margin left/right to auto in order to center it. However, I found myself wondering why the table itself can be centered when it also has no width..

table{
    margin:0 auto;
}

<table>
  <tbody>
    <tr><td>
<ul>
    <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
    </td></tr>
  </tbody>
</table>

css

Answer 1

Answer №1

A table is considered a block level element by default, with an automatic width that adjusts to fit its content. If the content results in a width smaller than 100% of the table's containing block, applying left/right margins set to auto will center the table within that block.

If you define a specific width for the table, using margin: 0 auto will still center it as long as the specified width is less than the containing block width.

To Center the UL Without Resorting to Using a Table

Below are two examples. The first example sets a width for the ul, while the second example uses display: table to alter the behavior of the ul from a block element to a table-like element.

.ex1 {
  width: 50%;
  margin: 0 auto;
  border: 1px dotted gray;
}

.ex2 {
  display: table;
  margin: 0 auto;
  border: 1px dotted gray;
}

<h3>Example 1 - Specify a width</h3>
<ul class="ex1">
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>  

<h3>Example 2 - Use a CSS table</h3>
<ul class="ex2">
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

Answer 2

A table is considered a block level element by default, with an automatic width that adjusts to fit its content. If the content results in a width smaller than 100% of the table's containing block, applying left/right margins set to auto will center the table within that block.

If you define a specific width for the table, using margin: 0 auto will still center it as long as the specified width is less than the containing block width.

To Center the UL Without Resorting to Using a Table

Below are two examples. The first example sets a width for the ul, while the second example uses display: table to alter the behavior of the ul from a block element to a table-like element.

.ex1 {
  width: 50%;
  margin: 0 auto;
  border: 1px dotted gray;
}

.ex2 {
  display: table;
  margin: 0 auto;
  border: 1px dotted gray;
}

<h3>Example 1 - Specify a width</h3>
<ul class="ex1">
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>  

<h3>Example 2 - Use a CSS table</h3>
<ul class="ex2">
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

Answer 3

Answer №2

When working with tables, the width of the table as a block level element will expand to fit the content, unlike an unordered list.

Instead of placing the ul inside a table (which is not recommended for semantic reasons unless a table is specifically needed), you can achieve the desired layout by setting ul {text-align: center} and ul li {display: block}

ul {
    text-align: center;
}

ul li {
  display: block;
}

<ul>
    <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
</ul>

Answer 4

When working with tables, the width of the table as a block level element will expand to fit the content, unlike an unordered list.

Instead of placing the ul inside a table (which is not recommended for semantic reasons unless a table is specifically needed), you can achieve the desired layout by setting ul {text-align: center} and ul li {display: block}

ul {
    text-align: center;
}

ul li {
  display: block;
}

<ul>
    <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
</ul>

can a table tag without a specified width still be successfully centered?

Answer №1

Answer №2

Similar questions

``How can I lock the top row of an HTML table containing input fields in place while

Implementing a collapsible full-width button that contains multiple elements (Bootstrap)

Changes in styling applied via ajax are only supported by Webkit when resizing the browser window

Rotation of the SVG coordinate system distorts angles

Using jQuery to animate the grayscale filter with a value of 0

Remove interactive data tables from the onclick event

Stop using the bootstrap dl-horizontal class for responsive design

The CSS styling feature is not functional within the JavaMail API

Ways to add Bootstrap Icon to Button

When the flex-grow property is set to 1, the height of the div extends beyond the space that

Tips for eliminating the gap separating the authentication design from the additional elements within the Laravel, Vue, and Inertia framework

Animating a div using a changing scope variable in AngularJS

What is the reason for using <div class="clear"></div> instead of <div class="clear"/>?

Mobile browsers consistently display a horizontal scroll bar

When attempting to load a CSS file, Java automatically redirects to the login page

Creating adaptable breakpoints for content using Bootstrap or pure CSS

What is the best way to activate a scrollbar exclusively for the final section in fullpage.js?

Is the order of elements in a CSS file important?

Web pages occasionally fail to load HTML files

Navigational Dropdown implemented on Bootstrap 4 Navigation Bar