The behavior of table elements is distinct when using align="center" compared to utilizing CSS text-align: center

In my table setup, I have a parent table with a width of 100% and a child table with a width of 300px. I attempted to center the child table using CSS by setting text-align: center; (https://jsfiddle.net/wrzo7LLb/1/)

<table class="body">
<tr>
  <td class="align center"> <!-- CSS text-align: center; -->
    <table class="wrapper">
     <tr>
       <td>
         some text
       </td>
     </tr>
    </table>
  </td>
</tr>
</table>

Unfortunately, this approach did not work as expected. Later on, I tried using align="center" which did work successfully.(https://jsfiddle.net/wrzo7LLb/)

<table class="body">
<tr>
  <td align="center"> <!-- align="center" -->
    <table class="wrapper">
     <tr>
       <td>
         some text
       </td>
     </tr>
    </table>
  </td>
</tr>
</table>

I am seeking an explanation as to why align="center" works while text-align: center; does not.

Although I am aware of the alternative method of using margin: 0 auto; for centering, it still puzzles me why align="center" is effective in this case but not the other.

htmlcss

Answer №1

From a semantic and technical standpoint, it is important to note that the text-align property should only be utilized for aligning inline level elements, not for tables.

The align property used with a table does not pertain to text alignment but rather specifies how the table should be positioned within the document.

According to the documentation related to table, the use of the align attribute has been deprecated. It is recommended to instead utilize margin:0 auto; to center a table element.

Important Note

Avoid using the deprecated align attribute with the <table> element. Opt for CSS styling by setting margin-left and margin-right to auto or simply use margin with 0 auto to achieve a similar centered effect as before.

Answer №2

text-align:center is specifically designed for inline elements, while table is a table element. Make sure to adjust and test it again.

table table {
    display:inline;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Translucent tonal backdrop hue

Is there a creative solution to dynamically increase the width of a border up to a certain point, using the thickness of the border as a progress bar indicator while reusing defined colors in stylesheets? Currently, I have the element with the border nest ...

htmlcss

Is there a way for me to produce a random choice depending on the option selected by the user in the <select> menu?

As a beginner in JavaScript, I am attempting to create a feature where users can select a genre from a dropdown list and receive a random recommendation from that genre displayed on the screen. In essence, my goal is to allow users to get a random suggest ...

javascripthtmllistarraylist

Using jQuery, is it possible to retrieve the product name and image dynamically?

I'm currently working on implementing an add to cart functionality using jQuery. When the add to cart button is clicked, the product name and image should be displayed. I can achieve this statically but I need help figuring out how to dynamically retr ...

javascriptjqueryhtml

When the AJAX function is called again, the previous loading process is interrupted, without the use of jQuery

I have created a function that loads a URL into an element, but it seems to be encountering issues when called repeatedly in a loop to load multiple elements. The current load operation stops prematurely: function loadDataFromURL(url, elementId) { var ...

javascriptajaxhtmlload

What are the steps to create a scrolling effect for the menu buttons on the mobile version of

When accessing the mobile version of Facebook on a handheld device, you will notice a menu with various options like "About," "Photos," "Friends," "Subscriptions," "Map," and more. This menu is designed to be slideable on your mobile device. Using HTML, ...

htmlcssjquery-mobilecss-float

What is the best way to present a unique page overlay specifically for iPhone users?

When browsing WebMD on a computer, you'll see one page. However, if you access it from an iPhone, not only will you be directed to their mobile page (which is easy enough), but they also display a special overlay with a "click to close" button prompti ...

phpjavascriptiphonehtml

Discovered a critical vulnerability that requires your attention. Execute `npm audit fix` to resolve the issue, or use `npm audit` for more information

After attempting to install mysql using 'npm install mysql', I encountered an error message stating: "found 1 critical severity vulnerability run npm audit fix to fix them, or npm audit for details" Following this, I proceeded with 'npm au ...

htmlnode.jsdatabaseamazon-web-servicesnpm

Learn how to showcase video information in a vue.js template

I am having difficulty displaying a saved media (video) file on another page after collecting it using the ckeditor5 media option. The data is stored along with HTML tags generated by ckeditor, so I'm using v-html to display other content like <p&g ...

javascripthtmlvue.jsckeditor

The serialize() function in jQuery is not functioning as expected

Greetings to all! I attempted to serialize a form using the jQuery method serialize() by its unique ID. Here is the HTML code snippet: <form name="structure_form" id="structure_form" method="post"> <div id="add_sections" class="postbox add_s ...

phpjqueryhtmlajaxforms

jquery function that switches image after the fifth mouseover event

I just can't seem to figure this out. I need a mouseover event that switches between two images until the fifth time you mouseover, then it changes to a third image. Here is my code so far: <!doctype html> <html> <head> <meta c ...

htmljquerymouseover

Getting the value from a dropdown menu and displaying it in a text area

I have 3 functions (radio, textarea, and dropdown) I was able to successfully retrieve the values of radio and textarea into the textarea. However, the drop down functionality is not working as expected. My goal is to display the selected option from the ...

javascriptjqueryhtmlcssbootstrap-4

When using Flexbox with a column wrap and setting the height to min-content, the wrapping behavior may not

I'm facing a CSS challenge. I have divs of varying heights and I want the parent element to adjust its height based on the tallest child element, while keeping the rest of the elements aligned properly. The code provided below achieves this for rows b ...

cssflexbox

Implementing image logout functionality in PHP

Is there a way I can associate an image with the logout link generated by this command? Thank you. <?php echo $login->get_link_logout(); ?> ...

phphtml

Full-screen modal fade not functioning properly

I am trying to implement multiple fullscreen modals on a single page, but I am facing an issue where they slide in and out at an angle instead of just fading in and out. I have been unable to achieve the desired effect of a simple fade transition. If you ...

javascripthtmlcssmodal-dialog

Column with space between arranged rows in a container

I have a container with multiple rows, each containing several columns. I am looking to adjust the spacing between each column <div class="main" style="margin-bottom:0px"> <div class="container"> <div class="row"> <div ...

cssbootstrap-4

Facing a blank page with no errors displayed during the HTML rendering process in Angular version 6

One of the most frustrating aspects of working with Angular is the lack of information provided when there is a render error in an HTML page. Instead of specifying which page the error is in, Angular defaults to the route page and provides no further detai ...

htmlangular

What is the best way to increase the size of a specific text style?

Recently, I created a post in WordPress that included some code samples. To ensure the code was displayed neatly, I utilized the "preformatted" style. However, upon previewing it, I noticed that the text within the code samples was incredibly small, almost ...

htmlcsswordpress

Improve the readability of a series of string.replace statements

When dealing with HTML code in Python, special characters need to be replaced using the following lines of code: line = string.replace(line, "&quot;", "\"") line = string.replace(line, "&apos;", "'") line = string.replace(line, "&amp ...

pythonhtmlstring

In order to show the responses underneath, we must first identify the parent comment

Currently, I have two different forms for comments - one is the "parent" comment form and the other is a response form. I am looking for ways to: Capture which response corresponds to which parent comment in the script Maintain the hierarchy of response ...

phphtmlsql

Talwind Flexbox Grid Design

Currently, I am exploring the world of website layout creation using Tailwind Flexbox Grids as I believe it can add significant value. However, I have encountered some queries: How does one go about constructing a layout like this? Referencing this speci ...

htmlcssvue.jstailwind-css