Table - Lines between cells not showing

[Vel]

Hey guys, still fairly new to HTML/CSS and having trouble getting lines to show between the cells in my table.

 

My code for showing the table is:

<?php
echo "<fleets>";
echo "<table class=\"fleets\">";

echo "<tr>";
	echo "<th>Fleet Commander</th>";
	echo "<th>Fleet Type</th>";
	echo "<th>Fleet Size</th>";
	echo "<th>Number of People</th>";
	echo "<th>Wanting to Merge?</th>";
	echo "<th>Looking For Ships</th>";
echo "</tr>";

while($rowGetFleets = mysql_fetch_array($queryGetFleets)) { //Load each fleet into a table
	echo "<tr>";
		echo "<td id=";
		if($rowGetFleets['fleetCommanderIsReg'] == 1) //If the FC of the fleet is a registered FC
			echo "registered";
		else
			echo "unregistered";
		echo "><a href=\"#\" onclick=\"CCPEVE.showInfo(1377, " . $rowGetFleets['fleetCommanderId'] . ");\">" . 
		$rowGetFleets['fleetCommanderName'] . "</a></td>";
		echo "<td>";
		if($rowGetFleets['fleetType'] == 1)
			echo "Armour";
		if($rowGetFleets['fleetType'] == 2)
			echo "Shield";
		echo "</td>";
		echo "<td>";
		switch ($rowGetFleets['fleetSize']) {
			case 1:
				echo "Vanguard fleet";
				break;
			case 2:
				echo "Assault fleet";
				break;
			case 3:
				echo "HQ fleet";
				break;
			case 4:
				echo "Mothership fleet";
				break;
			default:
				echo "Invalid fleet size";
				break;
		}
		echo "</td>";
		echo "<td>" . $rowGetFleets['fleetNumberOfPeople'] . "</td>";
		if($rowGetFleets['fleetMerge'] == 1)
			echo "<td>Yes</td>";
		else
			echo "<td>No</td>";

		//Form string for what ships the fleet is looking for
		$looking = FALSE;
		if($rowGetFleets['lookingForLogistics'] == TRUE) {
			$strLookingFor = "Logistics";
			$looking = TRUE;
		}
		if($rowGetFleets['lookingForDps'] == TRUE) {
			if($looking == TRUE)
				$strLookingFor = $strLookingFor . ", DPS";
			else {
				$strLookingFor = "DPS";
				$looking = TRUE;
			}
		}
		if($rowGetFleets['lookingForSniper'] == TRUE) {
			if($looking == TRUE)
				$strLookingFor = $strLookingFor . ", Snipers";
			else {
				$strLookingFor = "Snipers";
				$looking = TRUE;
			}
		}
		if($rowGetFleets['lookingForOgb'] == TRUE) {
			if($looking == TRUE)
				$strLookingFor = $strLookingFor . ", an Off-Grid Booster";
			else {
				$strLookingFor = "An Off-Grid Booster";
				$looking = TRUE;
			}
		}
		if($looking == FALSE)
			$strLookingFor = "None";
		echo "<td>$strLookingFor</td>";
	echo "</tr>";
} //End of while
echo "</table>";
echo "</fleets>";
?>

 

My CSS file is:

@charset "utf-8";
/* CSS Document */

/*CSS Reset*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}

/* remember to define focus styles! */
:focus {
outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
/*End CSS Reset*/

/* Tell the browser to render HTML 5 elements as block */  
header, footer, nav, text, messages, success, error, fleets, faq, leftWrapper, rightWrapper, bottomWrapper {  
    display: block;  
}

body {  
    margin: 0 auto;  
    width: 900px;  
    font: 13px/22px Helvetica, Arial, sans-serif;  
    background: #202020;
color: #f1f1f1;
}

header {
background-color: #202020;
margin: 0 auto;
width: 900px;
height: 120px;
color: #EEEEEE;
}

footer {
clear: both;
margin: 0 auto;
width: 900px;
font: 11px Arial, Helvetica, sans-serif;
padding-top: 30px;
}

h1 {  
    font-size: 28px;  
    line-height: 44px;  
    padding: 22px 0;
text-align: center;
}

h2 {  
    font-size: 20px;  
    line-height: 44px;  
    padding: 22px 0;  
}
  
p {
padding-bottom: 22px;
}

a {
color: #d50000;
}

a:hover {
color: #f1f1f1;
}

a:selected {
color: #f1f1f1;
}

a:active {
color: #f1f1f1;
}

nav {
left: 0;
width: 100%;
height: 50px;
}

nav ul {
margin: 0 auto;
width: 900px;
padding-left: 2px;
}

nav ul li {
float: left;
display: block;
width: 128px;
}

navAdmin ul li {
float: left;
display: block;
margin-right: 15px;
width: 160px;
font-size: 14px;
line-height: 44px;
text-align: center;
color: #000;
}

messages {
clear: both;
margin: 0 auto;
width: 100%;
}

success {
width: 100%;
font: 13px/22px Helvetica, Arial, sans-serif;
color: #090;
}

error {
width: 100%;
font: 13px/22px Helvetica, Arial, sans-serif;
color: #C00;
}

fleets {
width: 100%;
}

table {
text-align: left;
vertical-align: middle;
}

text {
clear: both;
}

ol li {
list-style-type: decimal;
font-size: 14px;
list-style-position: inside;
}

faq h3 {
font-size: 15px;
padding: 5px;
}

leftWrapper {
width: 50%;
float: left;
}

rightWrapper {
width: 50%;
float: right;
}

bottomWrapper {
clear: both;
}

/*Classes*/

table.selected {
width: 350px;
}

table.fleets {
width: 900px;
border: 1px solid #303030;

}

table.updateFleet {
width: 500px;
border: thick solid #e0e0e0;
}

table.updateFleet th, td {
text-align: left;
}

table.fleets th, td {
padding: 5px 15px;
min-width: 110px;
}

.lf {
width: 60px;
}

/*IDs*/

#home {
background-image: url(../images/banner_home.jpg);
}

#admin {
background-image: url(../images/banner_admin_cp.jpg);
}

#faq {
background-image: url(../images/banner_faq.jpg);
}

#fleets {
background-image: url(../images/banner_manage_fleets.jpg);
}

#profiles {
background-image: url(../images/banner_register_as_fc.jpg);
}

#register {
background-image: url(../images/banner_register_as_fc.jpg);
}

#btnAdmin {
display: block;
width: 128px;
height: 50px;
background: url(../images/button_admin_cp.gif) no-repeat 0 0;
}

#btnAdmin:hover {
background-position: 0 -50px;
}

#btnAdminStatic {
display: block;
width: 128px;
height: 50px;
background: url(../images/button_admin_cp.gif) no-repeat 0 0;
}

#btnHome {
display: block;
width: 128px;
height: 50px;
background: url(../images/button_home.gif) no-repeat 0 0;
}

#btnHome:hover {
background-position: 0 -50px;
}

#btnFaq {
display: block;
width: 128px;
height: 50px;
background: url(../images/button_faq.gif) no-repeat 0 0;
}

#btnFaq:hover {
background-position: 0 -50px;
}

#btnFleets {
display: block;
width: 128px;
height: 50px;
background: url(../images/button_manage_fleets.gif) no-repeat 0 0;
}

#btnFleets:hover {
background-position: 0 -50px;
}

#btnJoin {
display: block;
width: 128px;
height: 50px;
background: url(../images/button_join_btl_pub.gif) no-repeat 0 0;
}

#btnJoin:hover {
background-position: 0 -50px;
}

#btnJoinStatic {
display: block;
width: 128px;
height: 50px;
background: url(../images/button_join_btl_pub.gif) no-repeat 0 0;
}

#btnProfiles {
display: block;
width: 128px;
height: 50px;
background: url(../images/button_profiles.gif) no-repeat 0 0;
}

#btnProfiles:hover {
background-position: 0 -50px;
}

#btnRegister {
display: block;
width: 128px;
height: 50px;
background: url(../images/button_register_as_fc.gif) no-repeat 0 0;
}

#btnRegister:hover {
background-position: 0 -50px;
}

#btnRegisterStatic {
display: block;
width: 128px;
height: 50px;
background: url(../images/button_register_as_fc.gif) no-repeat 0 0;
}

#secure {
text-align: center;
color: #C00;
}

#registered {
background: #82E082;
}

#unregistered {
background: #FF7878;
}

#center {
text-align: center;
}

#middle {
text-align: center;
vertical-align: middle;
}

 

Only the border around the table is showing, not the lines between the cells. Can someone help me? I've tried rules=rows with no joy. I've tried cellspacing=1. I have no clue as to what it could be.

[cyberRobot]

You'll need to add the border declaration to the table's column selector:

 

table.fleets th, td {
     padding: 5px 15px;
     min-width: 110px;
     border: 1px solid #303030;
}

[Vel]

Aha, so you have to define the cells border, not the tables border. Thank you.

[cyberRobot]

Aha, so you have to define the cells border, not the tables border. Thank you.

 

 

The border under the "table" selector adds a border around the table, while the border under the "td" and "th" selector adds a border around the individual cells. If you're looking for an affect which is similar to the border attribute for the <table> tag, you'll need both. 

 

 

Note that I just noticed that the following may need to be modified:

 

table.fleets th, td {
     padding: 5px 15px;
     min-width: 110px;
     border: 1px solid #303030;
}

 

 

Right now it applies the padding, min-width, and border to all table cells. If you only want the styles applied to the "fleets" tables, you'll need to change the selector to:

 

table.fleets th, table.fleets td {

[Vel]

Ah, thank you again. I will change that. I find CSS a pain to learn. It seems to defy most other languages. I would have thought adding a border around the table would have automatically added it around the cells too because the cells should have inherited it from the table. Guess I was wrong...