View Full Version : Centering Tables in CCS

Oct 19th, 2008, 11:12 PM
I wonder if anyone can help i have a few html pages and one css file below. I was wondering how to make everything centered in the middle of the web page.

It is a load of league tables and at the moment they are all at the left side.

Thanks in advance.

/* 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}

Oct 19th, 2008, 11:47 PM

You didn't give the html code, so here is a link with some information about centering. You could probably change the word DIV with TABLE in the link provided.

Oct 20th, 2008, 10:21 AM
The html code gets updated when the results change dont know if this makes any difference i will post a html code asap thanks a lot.

Oct 20th, 2008, 10:24 AM
Please remember to wrap your code by
][/COLOR] tags while posting here.

Oct 20th, 2008, 09:28 PM
here is the index file

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="generator" content="Professional League 2006">
<link rel="stylesheet" type="text/css" href="styles.css">
<title>Unofficial Scottish Ice Hockey League</title></head>
<frameset border=0 frameborder=0 framespacing=0 rows="30,*">
<frameset border=0 frameborder=0 framespacing=0 cols="308,*">
<frame scrolling=no marginheight=3 marginwidth=8 src="mainNav_r0.html" name="mainNav">
<frame scrolling=no marginheight=3 marginwidth=8 src="emptyNav.html" name="subNav">
<frame marginheight=3 marginwidth=8 src="table122.html" name="main">
<noframes>Your browser does not support frames. Follow this link to get to the start page<br><a href="table122.html">table122.html</a></noframes>

Oct 20th, 2008, 10:12 PM
here is the index file
Doing it all wrong.

Tables and frames are big NO NO!

Oct 20th, 2008, 10:47 PM
the professional league generates the files but it does give you the option to export as csv file grapics file and asci

Oct 21st, 2008, 04:47 AM
How about:

table {
margin:0 auto;

An auto left and right margin should centre the tables.

Oct 21st, 2008, 06:51 AM
i think that will not be necessary.. since he's using tables.. using align: center; would do..

Oct 21st, 2008, 09:02 AM
does that go into the css file or html.
Is there anything that makes editing the css file easy, well easy for the likes of me.?