3 newbie CSS questions

Naoise · Jun 25, 2007

1) How do I remove borders from a table in CSS? Tried border:0px; but while that removes the outer border, my table rows have colours and the grids are visible in white.

2) How do you center align a table via CSS? I want the equivalent effect of doing align="center" on the table tag itself. I tried margin-left:50% but it seemed to place the table way over 50% of the way. I'm hoping I'm not going to have to set absolute values but can set a relative %

3) How can you apply separate styles to separate input buttons in a table. So imagine I have 3 textboxes <input type="text" ... > and 1 submit button <input type="submit">
in a table tblFoo that already has styling on it. I'm looking for something like :

#tblFoo input.submit{

}
#tblFoo input.text{

}

Can this be done?

Any help appreciated.

feherke · Jun 25, 2007

Hi

1) The [tt]table[/tt] is only the outer element, inside there are [tt]tr[/tt] and [tt]td[/tt] elements, which have their own borders.

Code:

table,tr,th,td {
  border: 0;
}

2) By setting its horizontal margins to [tt]auto[/tt]. Nte that Explorer 5.5 and 6 has no idea about this and needs workaround.

Code:

table {
  width: 800px;
  margin: 0 auto;
}

http://bluerobot.com/web/css/center1.html

3) Again, does not work in Explorer 5.5 and 6, workaround needed for them.

Code:

#tblFoo input[type=submit] {

}
#tblFoo input[type=text] {

}

http://w3.org/TR/CSS21/selector.html

Feherke.

http://rootshell.be/~feherke/

BabyJeffy · Jun 25, 2007

An alternative set of answers...

1). I use the following:

Code:

table {
  border-collapse: collapse;
  border-spacing: 0px;
}

2). You can centre them like this (requires you set a width on the table):

Code:

table {
  width: 500px;
  margin-left: auto;
  margin-right: auto;
}

3). It's easier to add a class to the form elements:

Code:

<input type="text" [!]class="text"[/!] value=""/>
<input type="reset" [!]class="reset"[/!] value="Reset Form"/>
<input type="submit" [!]class="submit"[/!] value="Send"/>

Code:

.[!]text[/!] { background-color: gold; }
.[!]reset[/!] { background-color: red; }
.[!]submit[/!] { background-color: green; }

Hope that helps!

Cheers,
Jeff

[tt]Jeff's Page [!]@[/!] Code Couch

http://www.codecouch.com/jeff/blog/

http://www.coedit.co.uk/

[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094

ChrisHunt · Jun 25, 2007

You can centre them like this (requires you set a width on the table)

Not necessarily. If the contents of the table is narrow enough not to require the full width, the table will shrink to fit. Applying [tt]auto[/tt] left and right margins will centre the table. Look:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Table Test</title>
<style type="text/css">

table {
   margin: 1em auto;
   border-collapse: collapse;
 }

td { background: #ccc; }

</style>
</head>
<body>
<table>
  <tr>
    <td>Hello</td>
    <td>World</td>
  </tr>
</table>
</body>
</html>

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

Vragabond · Jun 28, 2007

Chris is right, because table is the only block level tag that has by default width set to auto and not 100% like all others. So, table will be just as wide as its contents and forcing automatic margins on each side will make it centered.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

3 newbie CSS questions

Naoise

Programmer

feherke

Programmer

BabyJeffy

Programmer

ChrisHunt

Programmer

Vragabond

Programmer

Similar threads

Part and Inventory Search

Sponsor