table cell spacing

bbxrider · Jan 29, 2008

this is the page i'm working on
http://1614-douglas-road.com/spectrum.html

i want to get the generous space between the images in the table preferably
without borders
so i have been using cellpadding and/or cellspacing
the picture titles can be 2 lines, 'hammered small', so they seem to need
their own row to be
centered under the pic and the same padding/spacing as the row with the
images, so they line up

what i'm trying to do is have similar spacing to the way the page goes now,
but get the pic titles
closer to the actual pics

have tried all kinds of colspan, &nbsp, separate tables for each row, etc
but getting nowhere fast

also not sure why table is not centering on page

any suggestions would be appreciated
bob

SigelsTankMage · Jan 29, 2008

you can use this code for centering with css

body {
margin:50px 0px; padding:0px;
text-align:center;
}

#Content {
width:500px;
margin:0px auto;
text-align:left;
padding:15px;
border:1px dashed #333;
background-color:#eee;
}
(source:http://bluerobot.com/web/css/center1.html)

and have you tried using padding yet?

SigelsTankMage · Jan 29, 2008

this took me less than five minutes so i went the extra mile. i used
code from blue robot and css listamatic since i thought it would be
better if you used lists for the images you had.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
<div id="content">
<div id="navcontainer">
<ul id="navlist">
<li><img src="img/40.jpg" width="40" heigh="40" /></li>
<li><img src="img/40.jpg" width="40" heigh="40" /></li>
<li><img src="img/40.jpg" width="40" heigh="40" /></li>
<li><img src="img/40.jpg" width="40" heigh="40" /></li>
</ul>
<br />
<ul id="navlist">
<li><img src="img/40.jpg" width="40" heigh="40" /></li>
<li><img src="img/40.jpg" width="40" heigh="40" /></li>
<li><img src="img/40.jpg" width="40" heigh="40" /></li>
<li><img src="img/40.jpg" width="40" heigh="40" /></li>
</ul>
</div>
</div>
</body>
</html>

body {
margin:50px 0px; padding:0px;
text-align:center;
}

#Content {
width:500px;
margin:0px auto;
text-align:left;
padding:15px;
border:1px dashed #333;
background-color:#eee;
}

ul#navlist
{
margin-left: 0;
padding-left: 0;
white-space: nowrap;
}

#navlist li
{
display: inline;
list-style-type: none;
}

#navlist a { padding: 3px 10px; }

#navlist a:link, #navlist a:visited
{
color: #fff;
background-color: #036;
text-decoration: none;
}

#navlist a:hover
{
color: #fff;
background-color: #369;
text-decoration: none;
}

ul>li{
padding:0 0 0 100px;
}

bbxrider · Jan 29, 2008

wow wish i was that fast,
thought about lists but obviously never got that far
will try all this soon and post back, with results
thanks
bob

John Hosking · Jan 29, 2008

(e-mail address removed) wrote:

[without quoting of the message he's replying to...]

this took me less than five minutes so i went the extra mile.

How does boasting about the small amount of time you spent demonstrate
that you made any "extra" effort? Or is this some droll humor?

i used
code from blue robot and css listamatic since i thought it would be
better if you used lists for the images you had.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML is pointless. Stay with HTML 4.01, but use strict:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css" />

If you're going to pretend to provide the complete source, include the

</head>
<body>
<div id="content">
<div id="navcontainer">

Not sure what makes this array of images a "nav" element.

<ul id="navlist">
<li><img src="img/40.jpg" width="40" heigh="40" /></li>
<li><img src="img/40.jpg" width="40" heigh="40" /></li>
<li><img src="img/40.jpg" width="40" heigh="40" /></li>
<li><img src="img/40.jpg" width="40" heigh="40" /></li>

All of the instances of heigh will need to become height.

</ul>
<br />
<ul id="navlist">

Only one instance of an id per page, please. OP will need to validate
all this code before spending much time with it. Might even have to
spend *six* minutes on it. ;-)

<li><img src="img/40.jpg" width="40" heigh="40" /></li>
<li><img src="img/40.jpg" width="40" heigh="40" /></li>
<li><img src="img/40.jpg" width="40" heigh="40" /></li>
<li><img src="img/40.jpg" width="40" heigh="40" /></li>
</ul>
</div>
</div>
</body>
</html>

body {
margin:50px 0px; padding:0px;
text-align:center;
}

#Content {

Watch for case mismatch with "content".

width:500px;
margin:0px auto;
text-align:left;

But you just gave body text-align:center.

padding:15px;
border:1px dashed #333;
background-color:#eee;
}
[...]

#navlist a { padding: 3px 10px; }

#navlist a:link, #navlist a:visited
{
color: #fff;
background-color: #036;
text-decoration: none;
}

#navlist a:hover

{
color: #fff;
background-color: #369;
text-decoration: none;
}

ul>li{

padding:0 0 0 100px;
}

This code doesn't do the enlarge-on-hover trick I presumed the OP
wanted, nor does it demonstrate captioned images in a grid.

Etc.

Table with two rows of titles	4	Jul 4, 2013
css table borders and spacing	2	May 11, 2006
HTML Works in IE Not Chrome or FireFox Why?	9	Aug 7, 2012
Working on mobile css menu with plenty of frustration!	2	Dec 29, 2022
Table creation with cell spacing of 0 on IE	1	Mar 22, 2005
Fitting images to table cells	11	Apr 3, 2012
menu bar and banner responsive issues....any guidance is appreciated!	0	Apr 5, 2016
row bottom border in inner table not matching up with row border in outer table	1	Jun 7, 2006

table cell spacing

bbxrider

SigelsTankMage

SigelsTankMage

bbxrider

John Hosking

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads