Align table using CSS

CSS in ASP.NET maker7

[Shaimaa]

Hi,
I am using ASP.NET maker 7 to generate a solution. Using this code generator, a default css is give. But i want to modify it so that i can have all my tables align to center.

Here is the CSS code

html {
height: 100%;
}

body {
background-color: inherit; /* background color */
color: inherit; /* text color */
font-family: Verdana; /* font name */
font-size: xx-small; /* font size */
margin: 0; /* top right bottom left */
height: 100%;

}

.aspnetmaker {
color: inherit; /* text color */
font-family: Verdana; /* font name */
font-size: xx-small; /* font size */
}

input, textarea, select {
font-family: Verdana; /* font name */
font-size: xx-small; /* font size */
}

a:active {
color: ; /* active link color */
}

a:link {
color: ; /* link color */
}

a:visited {
color: ; /* visited link color */
}

/* Menu */
ul.ewMenuBarVertical {
list-style-type: none;
list-style-position: outside;
padding: 2px;
margin: 0 0 0 6px;
}

ul.ewMenuBarVertical ul,li {
list-style-type: none;
list-style-position: outside;
padding: 0;
margin: 0 0 0 6px;
}

/* template layout */
.ewLayout {
font-family: Verdana; /* font name */
font-size: xx-small; /* font size */
width: 100%;
height: 100%;
}

.ewHeaderRow {
background-color: #6698FF; /* background color */
}

.ewContentTable {
font-family: Verdana; /* font name */
font-size: xx-small; /* font size */
width: 100%;
height: 100%;

}

.ewMenuColumn {
background-color: #EDF1F4; /* background color */
width: 180px;
vertical-align: top;
padding: 1px;
}

.ewContentColumn {
background-color: inherit; /* background color */
vertical-align: top;
padding: 10px;
}

.ewFooterRow {
background-color: #6698FF; /* background color */
color: #FFFFFF; /* footer font color */
padding: 4px;
}

.ewFooterText {
font-family: Verdana; /* font name */
font-size: xx-small; /* font size */
}

.ewForm {
margin: 0;
padding: 0;
}

.ewGrid {
border-collapse: separate;
}

.ewGridContent {
padding: 0;
border: 1px solid #003470; /* grid border */
}

/* grid pager panel */
.ewGridUpperPanel, .ewGridLowerPanel {
padding: 3px;
border-left: 0;
border-right: 0;
background-color: inherit; /* grid header color */
color: inherit; /* grid header font color */
font-family: Verdana; /* font name */
font-size: xx-small; /* font size */
}

.ewGridUpperPanel {
border-top: 0px;
border-bottom: 1px solid;
border-color: #4F93E3;
}

.ewGridMiddlePanel {
border: 0;
}

.ewGridLowerPanel {
border-top: 1px solid;
border-bottom: 0px;
border-color: #003470;
}

.ewGridUpperPanel td, .ewGridLowerPanel td {
color: inherit; /* grid header font color */
font-family: Verdana; /* font name */
font-size: xx-small; /* font size */
}

.ewPager td {
white-space: nowrap;
}

.ewTabContent {
padding: 0;
border: 0;
}

.ewMultiColumnTable {
border: 0;
}

.ewMultiColumnTable td {
padding: 10px;
}

/* main table */
.ewTable {
border: 0;
border-spacing: 0;
border-collapse: collapse;
empty-cells: show;
width: 100%;
font-family: Verdana; /* font name */
font-size: xx-small; /* font size */
/*margin-left:auto; /*align table to center*/
/*margin-right:auto;/*align table to center*/

}

.ewTableSeparate {
border-collapse: separate;
}

.ewTable td {
padding: 3px; /* cell padding */
border-bottom: 1px solid; /* border width, horizontal grid line */
border-top: 0px;
border-left: 0px;
border-right: 1px solid; /* border width, vertical grid line */
border-color: #003470; /* border color */
}

.ewTableAddOpt {
border: 0;
border-spacing: 0;
font-family: Verdana; /* font name */
font-size: xx-small; /* font size */
}

.ewTableAddOpt td {
padding: 3px; /* cell padding */
border: 0;
}

.ewTable .ewTableHeader, .ewTable .ewTableHeader td {
background-color: #003470;/* header bgcolor */
color: #FFFFFF; /* header font color */
border-bottom: 1px solid; /* header border width */
border-right: 1px solid; /* header border width */
border-color: #4F93E3; /* header border color */
background-image: url(images/); /* header bg image */
background-repeat: repeat-x;
vertical-align: top;
}

.ewPointer {
cursor: pointer;
}

.ewTableHeader a:link, .ewTableHeader a:active, .ewTableHeader a:visited {
color: #FFFFFF; /* header font color */
text-decoration: none;
}

.ewTableHeaderBtn {
width: 100%;
font-family: Verdana; /* font name */
font-size: xx-small; /* font size */
}

.ewTableHeader .ewTableHeaderBtn td {
background: transparent;
padding: 0;
border: 0;
white-space: nowrap;
}

/* main table row color */
.ewTableRow {
background-color: #FFFFFF; /* alt row color 1 */
color: #000033;
}

/* main table alternate row color */
.ewTableAltRow {
background-color: #EDF5FF; /* alt row color 2 */
color: inherit;
}

/* main table last row */
.ewTableLastRow td {
border-bottom: 0px;
}

/* main table edit mode row color */
.ewTableEditRow {
background-color: #FFFF99; /* edit mode color */
color: inherit;
}

/* main table highlight color */
.ewTableHighlightRow {
background-color: #99B0CA; /* highlight color */
color: inherit;
}

/* main table select color */
.ewTableSelectRow {
background-color: #F87217; /* select color */
color: #FFFFFF;
}

/* main table footer */
.ewTableFooter {
background-color: #D4E7FD; /* footer color */
color: inherit;
}

/* table for export to HTML */
.ewExportTable {
border-collapse: collapse;
empty-cells: show;
}

.ewExportTable td {
padding: 3px; /* cell padding */
border: 1px solid #C0C0C0;
}

.ewBasicSearch {
font-family: Verdana; /* font name */
font-size: xx-small; /* font size */
border: 0px;
border-collapse: collapse;
}

.ewBasicSearch td {
border: 0px;
padding: 2px;
}

.ewSearchOpr {
font-family: Verdana; /* font name */
font-size: xx-small; /* font size */
color: maroon;
}

.ewItemTable td {
color: inherit; /* text color */
font-family: Verdana; /* font name */
font-size: xx-small; /* font size */
border: 0px;
padding: 0px;
vertical-align: top;
}

/* separator */
.ewSeparator {
color: gray;
}

/* classes for report */
.ewReportTable {
border: 0px;
border-collapse: collapse;
}

.ewReportTable td {
padding: 3px;
}

.ewGroupField {
font-weight: bold;
}

.ewGroupName {
font-weight: bold;
}

.ewGroupHeader {
border-bottom: 3px double Gray;
border-top: 3px double Gray;
}

.ewGroupSummary {
border-top: 1px solid Gray;
}

.ewGroupAggregate {
font-weight: bold;
}

.ewGrandSummary {
border-top: 1px solid Gray;
}

/* message */
.ewMessage {
color: red; /* message color */
font-family: Verdana; /* font name */
font-size: xx-small; /* font size */
}

/* required field indicator */
.ewRequired {
color: red; /* message color */
font-family: Verdana; /* font name */
font-size: xx-small; /* font size */
}

/* highlight */
.ewHighlightSearch {
font-weight: bold;
background-color: yellow;
}

/* Template */
.ewTemplate {
display: none;
}

/* YUI TabView */
.yui-skin-sam .yui-navset .yui-nav {
font-family: Verdana; /* font name */
font-size: xx-small; /* font size */
}

.yui-skin-sam .yui-navset .yui-content {
padding: 0;
border: 0;
}

/* .yui-navset defaults to .yui-navset-top */
.yui-skin-sam .yui-navset .yui-nav,
.yui-skin-sam .yui-navset .yui-navset-top .yui-nav { /* protect nested tabviews from other orientations */
border-width: 0 0 2px;
}

/* YUI Button */
.yui-skin-sam .yui-button button, .yui-skin-sam .yui-button a {
font-size: xx-small; /* font size */
}

/* YUI Panel */
.yui-skin-sam .yui-panel .hd {
font-size: xx-small; /* font size */
line-height: 2.5;
}

.yui-navset .yui-content .yui-hidden {
display: none;
}

/* Auto-Suggest */
.yui-skin-sam .yui-ac { /* DO NOT CHANGE! */
position: relative;
}

.yui-skin-sam .yui-ac-input { /* DO NOT CHANGE! */
position: relative;
width: auto;
}

.yui-skin-sam .yui-ac-content ul{
font-family: Verdana; /* font name */
font-size: xx-small; /* font size */
color: #000000; /* text color */
}

.ewUnmatched {
background: #FF9F9F;
}

Well it is quite long code, but i guess it was important to post the whole of it...so that anyone trying to help can tell me where to place the code to center the tables.
i was thinking of using aling=center like in html but it does not work here...

Any solution to my problem is welcome.

thanksss

[simonuk]

Welcome to WebmasterWorld!

If you're referring to the content inside the table then create:

table {text-align:center;}

If you mean the table itself then you need to use margins.

table {width:20em; margin:0 auto;}

Would centre the table correctly.

[abidshahzad4u]

Please use this, may be helpful

table { margin-left:auto; margin-right:auto }

Note that table with 100% width can't be aligned center or else where.

thanks