Hi was told to put this

align: center;

to center tables in an html page but where does it go, into css or html not got a clue thanks.

Recommended Answers

All 7 Replies

Well you could do it one of two ways. The first way is against the current standards but it still works and that is to do something like this:

<div align="center>Text/Whatever</div>

The other way is to use CSS which could be done several different ways but I'll just show you the one where you put it straight into the tag:

<div style="position:absolute;left:15%;">Text/Whatever</div>

That says start the box at point 0,0 of whatever its contained in and move it 15% away from the left side. You can play with the percent to align it perfectly center.

There are probably other ways as well, but I can't name any off the top of my head.

Will that align everything underneath or will i have to put that a few times.

Is there any good software that can be recomended that does all this for?

Thanks again.

Well the div tag basically makes an imaginary box around whatever is inside it and yes it will align everything in between the two div tags.

If you want a good program I recommend Adobe Dreamweaver CS3, but that cost a good chunk of money I believe, however there is a free trial you can download on the adobe site.


I forgot to mention, I am using a programme that i use to create league standings and player stats. It then exports to a couple of html pages and creates a css file. It only updates changed files. The league tables are all displayed in these html pages so i dont know if that makes any difference. I can post the css code or index file etc to see what i mean. Its the whole league tables i need centred. I can give you the web address to let you see what i mean if you want.


/* Document-wide definitions */
body {background-color:#FFFFFF}
body {font-family:Calibri}
body.content {}
body.navigation {}
/* Common definitions for all elements */
#singleBorder {border-width:1px; border-style:solid; border-color:#282828}

/* Colors and frames for headlines and images */
h2, h3, h4 {color:#0000FF}
table, h2, h3, h4, img {margin-bottom:6px}
table img {margin-bottom:0px; border:0px}
table.header img {padding-right:12px}

/* definitions for "native" tables (i.e. lists) */
table.native {border-width:0px}
table.native tr.color0 {color:#282828; background-color:#FFFFFF}
table.native tr.color1 {color:#0000FF; background-color:#C0C0C0}
table.native tr.color2 {color:#0000FF; background-color:#D6E9E4}
table.native tr.color3 {color:#0000FF; background-color:#B5DBD3}
table.native tr.color4 {color:#0000FF; background-color:#54A095}
table.native tr.color5 {color:#0000FF; background-color:#C4D2D3}
table.native tr.color6 {color:#0000FF; background-color:#8BAFB1}
table.native tr.color7 {color:#0000FF; background-color:#5A989A}
table.native tr.color8 {color:#0000FF; background-color:#A7C0C2}
table.native tr.color9 {color:#0000FF; background-color:#76A8AA}
table.native tr.color10 {color:#0000FF; background-color:#429195}
table.native tr.color11 {color:#0000FF; background-color:#FFFFFF}
table.native tr.color12 {color:#0000FF; background-color:#FFFFFF}
table.native tr.separator {color:#0000FF; background-color:#FFFFFF} /* Intermediate headlines in result lists */
table.native tr.headFoot {color:#FFFFFF; background-color:#C0C0C0}  /* Headers and footers in lists */
table.native td {padding:1px; padding-left:4px; padding-right:4px; border-style:solid; border-color:#0000FF; border-width:0px; border-bottom-width:1px}
table.native tr.separator td {border-bottom-width:0px}
table.native td.sepBar {border-right-width:1px}
table.native td.noValue {padding-left:0px; padding-right:0px}
table.native td.firstCol {border-left-width:1px}
table.native td.lastCol {border-right-width:1px}
table.native img.tableImage {padding-left:2px; padding-right:4px}
#firstRow {border-top-width:1px}
#lastRow {}
table.native th {border-width:1px; border-style:solid; border-color:#282828; padding-left:4px; padding-right:4px}

/* Text fields with or without background and border lines */
td.textField {color:#282828; background-color:#E7F1EE; padding:2px; border-style:solid; border-width:1px; border-color:#282828}
td.transparent {color:#0000FF; background-color:#FFFFFF; border-width:0px}
p.textField {margin-top:0px; margin-bottom:6px}

table.composedRow td {padding-left:4px; padding-right:4px}

/* Result matrix (is a single large HTML table) */
table.matrix {border-width:0px}
table.matrix td {color:#0000FF; border-style:solid; border-color:#0000FF; border-width:0px;}
table.matrix #colorFrame {color:#0000A0; background-color:#FFFFFF}
table.matrix #colorTable {background-color:#FFFFFF; padding-left:3px; padding-right:3px}
table.matrix #colorTableSmall {background-color:#FFFFFF; padding-left:3px; padding-right:3px; font-size:80%}
table.matrix #colorTableNoValue {background-color:#FFFFFF; padding-left:0px; padding-right:0px}
table.matrix #colorTableSmallNoValue {background-color:#FFFFFF; font-size:80%; padding-left:0px; padding-right:0px}
table.matrix #color1 {background-color:#C0C0C0; font-size:80%}
table.matrix #color2 {background-color:#D6E9E4; font-size:80%}
table.matrix td.border_b {border-bottom-width:1px}
table.matrix td.border_br {border-bottom-width:1px; border-right-width:1px}
table.matrix td.border_r {border-right-width:1px}

Ok I see your using tables. In which case the easiest way to do this is to open the html in notepad or something similar and find the top most <table> tag and just add align=center to it like this.

<table align="center">

Does that mean i have to do this everytime? They get updated every week sometimes more than once. Doesnt really matter if so just a hastle. Thanks,

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, learning, and sharing knowledge.