Joseph Smith Joseph Smith - 11 days ago 9
HTML Question

Equal Space Between Table Headers

I am currently creating a practice website for my Arma 2 Unit (88th Airborne Divsion), I have created a simple navigation bar using table headers hyperlinked, however the space between the table headers is dependant on how long the word is. Is there a way of making equal space between the headers?

HTML CODE:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>88th Airborne Division</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="banner"><img src="images/logo.png" width="680" height="125" alt="logo" /></div>
<div id="navbar"><table width="680" border="0">
<tr>
<th>Home</th>
<th>About Us</th>
<th>Members</th>
<th>Apply</th>
</tr>
</table>
</div>
</div>
</body>
</html>


CSS CODE:

*{
margin:0;


}

#container {
height: 100%;
width: 100%;
}
#banner {
height: 125px;
width: 680px;
margin-left:auto;
margin-right:auto;
}


#navbar {
background-color:#333;
width: 680px;
height:25px;
margin-right: auto;
margin-left: auto;
text-align:center;
}
th{
border-right-width:medium;
border-right-color:#000;
border-right-style:groove;

}


enter image description here

Answer

Because of table width=680, you can put in CSStr{ width: 170px; }, or, you can change th in CSS

tr{  
    position: relative; /* you may put it out, maybe it will work without it */
}

th{
    border-right-width:medium;
    border-right-color:#000;
    border-right-style:groove;
    width: 25%;
}

which gives you more flexible sizing. Also, I don't know if you have any additional borders or margins. If so, tds will not fit in that 25% (because dimension is measured without margin, padding and border), so play with it (lower percentage until you get the right look).