hallo
I'm new here. I've been coding HTML for a long time, but never used forums much before. So I have a question which is very basic, but I've never found an answer yet.
Within my HTML 4 Transitional page, there is one main table. I want this table to appear in the middle of the page, however wide it is.
The following don't work:
a) <body align="center">
b) <body>
<table class="maintable">
and in the CSS:
.maintable {text-align: center;}
The only way I can get it to work is to say:
<table align="center">
Surely there's a way I can do this in CSS, so that it will be centered in any browser?
TIA
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Basic center page</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
html, body {
margin:0;
text-align:center;
}
#container {
margin:0 auto;
width:80%; /* change to required width */
text-align:left;
}
#contents {
border:1px solid red;
}
</style>
</head>
<body>
<div id="container">
<div id="contents">
<p>contents</p>
</div>
</div>
</body>
</html>thank you very much, Fang.
I'm new here. I've been coding HTML for a long time, but never used forums much before. So I have a question which is very basic, but I've never found an answer yet.
Within my HTML 4 Transitional page, there is one main table. I want this table to appear in the middle of the page, however wide it is.
The following don't work:
a) <body align="center">
b) <body>
<table class="maintable">
and in the CSS:
.maintable {text-align: center;}
The only way I can get it to work is to say:
<table align="center">
Surely there's a way I can do this in CSS, so that it will be centered in any browser?
TIA
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Basic center page</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
html, body {
margin:0;
text-align:center;
}
#container {
margin:0 auto;
width:80%; /* change to required width */
text-align:left;
}
#contents {
border:1px solid red;
}
</style>
</head>
<body>
<div id="container">
<div id="contents">
<p>contents</p>
</div>
</div>
</body>
</html>thank you very much, Fang.