The table is refusing to align itself in the center

I've been struggling to center the text inside this table despite trying various solutions. Any help would be greatly appreciated.

Here's the HTML code I have:

<div id="paccount">
    <table style="margin: 0 auto;">
        <tr>
            <td width="320" height="150">Order History</td>
            <td width="28" rowspan="4"></td>
            <td width="320" rowspan="4">Personal Information</td>
        </tr>
        <tr>
            <td height="15"></td>
        </tr>
        <tr>
            <td width="320" height="90">Preferences</td>
        </tr>
        <tr>
            <td height="15"></td>
        </tr>
        <tr>
            <td height="115" colspan="3">Logout</td>
        </tr>
    </table>
</div>

And here is the CSS for the div:

#paccount {
    width: 668px;
    height: 400px;
    background-color: transparent;
    text-align:center;  
}

EDIT: Apologies, my previous statement was unclear. What I meant was centering the text within the table itself.

htmlcsshtml-tablecenter

Answer №1

The table is not being centered properly.

It looks like you are attempting to center all the text on the page.

In order to achieve proper alignment, make sure to first center the #paccount div.

To achieve this, use the following CSS:

#paccount{
    width:668px;
    height:400px;
    background-color: transparent;
    margin:0 auto; /* This line is crucial for centering! */
}

Answer №2

To keep the div centered on the page, use the following CSS:

#paccount {
    width: 668px;
    height: 400px;
    border:1px solid black;
    background-color: transparent;
    text-align:center;  
    margin-left:auto;
    margin-right:auto;
}

If you prefer to center the table cells instead, you will need to add another CSS rule for the table and possibly for the cells as well.

Answer №3

Include text alignment in td elements

<div id="paccount">
    <table style="margin: 0 auto;">
        <tr>
            <td width="320" height="150">Order History</td>
            <td width="28" rowspan="4"></td>
            <td width="320" rowspan="4">Personal Information</td>
        </tr>
        <tr>
            <td height="15"></td>
        </tr>
        <tr>
            <td width="320" height="90">Preferences</td>
        </tr>
        <tr>
            <td height="15"></td>
        </tr>
        <tr>
            <td height="115" colspan="3">Logout</td>
        </tr>
    </table>
</div>

CSS Styles:

#paccount {
    width: 668px;
    height: 400px;
    background-color: transparent;
    text-align:center;  
}
td{
   text-align:center;
}

Answer №4

Put it in a div called container like this

HTML:

<div id="paccount" class="container">
    <table style="margin: 0 auto;">
        <tr>
            <td width="320" height="150">Order History</td>
            <td width="28" rowspan="4"></td>
            <td width="320" rowspan="4">Personal Information</td>
        </tr>
        <tr>
            <td height="15"></td>
        </tr>
        <tr>
            <td width="320" height="90">Preferences</td>
        </tr>
        <tr>
            <td height="15"></td>
        </tr>
        <tr>
            <td height="115" colspan="3">Logout</td>
        </tr>
    </table>
</div>

CSS:

.container{
 width: 500px; //you are free to modify the width.
 margin: 0 auto;
}

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

Is the form validation failing to update after an item is removed from the model? Possible bug detected?

Lately, I've been exploring AngularJS and encountered an interesting bug. Let me start by sharing some functional code: View: <body ng-controller="MainCtrl"> <form name="form"> <div ng-repeat="phone in phoneNumbers"> ...

javascripthtmlvalidationangularjs

Animating a dropdown menu with jQuery

I have a typical submenu structure set up like this: <ul> <li> <a href="#">Parent link</a> <ul> <li><a href="#">Submenu link</a></li> </ul> </li> </ul> In my de ...

javascriptjquerycssanimationdrop-down-menu

Tips for creating a drawing grid with a table

I am currently working on a project where I need to create a canvas-like table with around 10,000 cells. The goal is to allow users to draw on this canvas by moving their mouse over it while holding down specific keys (e.g. ctrl for blue, shift for red). ...

javascripthtmlcsscanvashtml-table

Establish a vertical column that matches the height of its parent element

Is there a way to create a column that matches the height of its parent element? I have a navbar followed by a container with three columns. The challenge is to make the last right column the same height as its parent and also scrollable. In this scenario, ...

htmlcsstwitter-bootstrap

Is there a way to delay rendering the html until all the content has been fully downloaded?

Whenever I visit my webpage, I notice that the content starts loading without the animation applied to it. It seems like the CSS hasn't finished downloading yet. To solve this issue, I added a preloading bar overlay to signal that the content is still ...

javascripthtmlcssajax

Step-by-step guide on integrating node.js and MySQL to store data from an online form in a database

Currently, I am attempting to insert data into a MySQL database using node.js by clicking the submit button. However, an error message has appeared and despite understanding it somewhat, I am unsure of how to proceed. Any assistance would be greatly apprec ...

javascripthtmlmysqlnode.js

There is no need for updates as git is already current for some mysterious reason

As a newcomer to git, I've been trying to wrap my head around it but still struggling. Can someone help clarify this for me? My question pertains to the 'master' branch in git which contains the following code: const list = [ 'h&ap ...

javascripthtmlgitgithubconsole.log

What is the best way to ensure jQuery runs as soon as the page loads?

In my current jQuery script, I have implemented a feature that checks for content in two input fields (a login page with username and password) and adds the class "used" if there is content present. $(window, document, undefined).ready(function() { $(&a ...

jqueryhtml

CSS: Deciphering the Hidden Message in this Code Snippet!

Update In my CSS file, I encountered a conflict with the following snippets. When I include this section: <style type="text/css"> ::selection{ background-color: #E13300; color: white; } ::moz-selection{ background-color: #E13300; colo ...

css

Issue with Bootstrap 4 column width when using Angular 2 *ngFor

I have a container that displays search results. The layout is set up using Bootstrap columns, but there seems to be excessive padding or margin causing the results to appear very narrow. Interestingly, if I manually input each result instead of using *ngF ...

htmlcssangulartwitter-bootstrap-4bootstrap-4

Having trouble rendering the response text from the API fetched in Next.js on a webpage

I've written some code to back up a session border controller (SBC) and it seems to be working well based on the output from console.log. The issue I'm facing is that the response comes in as a text/ini file object and I'm unable to display ...

javascripthtmlnode.jsreactjsnext.js

Issue with Navigation menu dropdown not functioning properly on Angular version 12 with Bootstrap 5

I am attempting to integrate bootstrap with Angular through a CDN. Below is the content of my index.html file: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Laboratorio Sigma< ...

htmlcssangularnavbarbootstrap-5

Tips for appending the id of an active element to a URL

My goal was to include the id value of the active element in a URL and then redirect to that URL with a button click. HTML <div class="icon" tabindex="0" id="company"> <img src="company.png"> </div> <button type="submit" onclick= ...

javascriptjqueryhtmlcss

Navigating an indefinite amount of state variables in React.js: A comprehensive guide

Receiving data from the server with an unknown number of items in the API leads me to utilize the map method in HTML for rendering. Below is the return section: if (loading) { return ( <div> <div> <Header /> ...

javascripthtmlnode.jsreactjs

Struggling to connect HTML elements with AngularJS and TinyMCE?

My objective is to edit text using tinymce, persist it in a database, and display it within a div by incorporating angularJS for the same styling and formatting. I am utilizing tinymce 3.5.8 with an angularUI directive. I have successfully saved the wysiw ...

htmlbindingangularjstinymce

Electron triggers MouseLeave event on child elements

Dealing with mouse hover events can be a bit tricky, especially when working with AngularJS in an Electron-hosted app. Here's the HTML template and script I'm using: HTML: <div id="controlArea" (mouseenter) = "onControlAreaEnter()" ...

javascripthtmlangularjstypescriptelectron

Why is it that this code can upload photos successfully, but not text files?

This is my PHP file for handling form actions. I have successfully implemented image uploads, but I am encountering an 'Invalid File Error' when trying to upload text files. What could be causing this error and how can I resolve it? <?php e ...

javascriptphphtml

What could be causing my .load() function to fail when attempting to target a specific div element?

My goal is to retrieve and display a div tag from another aspx page within my container div. Here is the jQuery code: function GetDocumentInfo(url) { $('MyContainer').load(url + ".otherdiv"); } This operation is triggered by a click event. ...

javascriptjqueryhtmlasp.net

Retrieving data from an API after the onClick event is activated

I'm facing a bit of a challenge with an HTML & JavaScript issue, which I believe should be straightforward to resolve. Since frontend development is not really my forte, I am hoping to find some assistance here. Task: A friend who owns a website buil ...

javascripthtmlasync-await

Tips for implementing a custom filter in an AngularJS JavaScript controller

Can anyone help me with creating a custom filter in an AngularJS JavaScript controller? I need to be able to search for items in an array called segments by their SegmentId. The filter should iterate through the segments array and return the segment that ...

javascripthtmlangularjsangularjs-filter