CSS, HTML, XHTML - Code tips, tricks, links

[charms987]

Tables & CSS Formatting

HTML File:
<table class="one">
<tr><td>text/image</td><td>text/image</td></tr>
<tr><td>text/image</td><td>text/image</td></tr>
<tr><td>text/image</td><td>text/image</td></tr>
<tr><td>text/image</td><td>text/image</td></tr>
<tr><td>text/image</td><td>text/image</td></tr>
<tr><td>text/image</td><td></td></tr>
</table>

CSS File:
table.one {
width: 80%;
border: 0.05em #6699CC solid;
border-collapse: collapse;
}

table.one td {
text-align: center;
font-family: Arial, Helvetica, Verdana, sans-serif;
font-weight: normal;
font-size: 0.80em;
color: #404040;
width: 50%;
background-color: #fafafa;
border: 0.05em #6699CC solid;
border-collapse: collapse;
}

End Product:
.

I still think tables are better but....

Ok, take a look at this:
<table class="one">
<tr><td>text/image1</td><td>text/image2</td></tr>
<tr><td>text/image3</td><td>text/image4</td></tr>
<tr><td>text/image5</td><td>text/image6</td></tr>
<tr><td>text/image7</td><td>text/image8</td></tr>
<tr><td>text/image9</td><td>text/image10</td></tr>
<tr><td>text/image11</td><td>12</td></tr>
</table>

I want to merge cells 3-5-7-9. How? I also want to allow the table to be say 85% of the screen. Why? Because this will be the core of my site.

I have not even begun to figure out how to nest a table in a table!

Does all this keep us little guys out of the market or do-it-yourself? Or am i just being thick?

Thanks matauri.

Michael

[bj]

IMO the best practice to get into is to use either em or % , as they adjust to various resolutions better.

You should be aware that using em on the body can trigger nasty behaviors in IE. Best practice is to define font on the body as 100.01% (plays nice with Opera) then use either percentages or ems on the inner elements. By doing so you can define how you, the designer, wish the page to look, but allow for those who need to do so to resize the font to suit themselves.

Also, to anyone using font sizes in lists, remember that IE6 has a problem with inheritance which can be a bugbear with nested lists.

I'm also going to mention that I have my online web development bookmarks in the Kickass Webgeek Resources section of my website. Those who are tackling the intricacies of css might especially find the CSS section helpful, since there are numerous categorized links to css layouts, tricks, browser bugs, css-friendly scripts, and much more, all in an easy to decipher format. Most of these links are attributable to the folks on the CSS-Discuss List, the best group of mentors on the face of the planet (even if they can be a bit feisty at times!)

[drummin]

I want to merge cells 3-5-7-9. How? I also want to allow the table to be say 85% of the screen. Why? Because this will be the core of my site.

I have not even begun to figure out how to nest a table in a table!

Does all this keep us little guys out of the market or do-it-yourself? Or am i just being thick?

It's best not structure your whole site in table format, but to answer your question.

<table class="one">
<tr><td>text/image1</td><td>text/image2</td></tr>
<tr><td rowspan="4">text/image3</td><td>text/image4</td></tr>
<tr><td>text/image6</td></tr>
<tr><td>text/image8</td></tr>
<tr><td>text/image10</td></tr>
<tr><td>text/image11</td><td><table class="two">
<tr><td>text/image1b</td></tr>
<tr><td>text/image2b</td></tr>
<tr><td>text/image3b</td></tr>
</table></td></tr>
</table>

Note: I also "nested" another table into cell 12.
I know, I know... But he asked...

[jackson992]

[quote="drummin"]

<table class="one">
<tr><td>text/image1</td><td>text/image2</td></tr>
<tr><td rowspan="4">text/image3</td><td>text/image4</td></tr>
<tr><td>text/image6</td></tr>
<tr><td>text/image8</td></tr>
<tr><td>text/image10</td></tr>
<tr><td>text/image11</td><td><table class="two">
<tr><td>text/image1b</td></tr>
<tr><td>text/image2b</td></tr>
<tr><td>text/image3b</td></tr>
</table></td></tr>
</table>

Note: I also "nested" another table into cell 12.
I know, I know... But he asked...

ok I must be a bit slow but how does this help? I don't see an advantage on doing it this way versus regular tables? Looks like the same coding except for the table class part.

[drummin]

charms wrote "I want to merge cells 3-5-7-9. How?"
The example was just showing how to merge these cells.
As far adding class to tables, it's a good way to lighten up your code, especially if you're using tables.

[jackson992]

so is there two parts you have to code? It says above a section for html and a section for css?

[drummin]

so is there two parts you have to code? It says above a section for html and a section for css?

Sure. Just save css to file with .css extention then add link in head section of html to your style sheet.
Use link like this in head...
<link rel="stylesheet" href="tablestyle.css" type="text/css" />

[ani_123]

so is there two parts you have to code? It says above a section for html and a section for css?

Sure. Just save css to file with .css extention then add link in head section of html to your style sheet.
Use link like this in head...
<link rel="stylesheet" href="tablestyle.css" type="text/css" />

hii.. chk out this site its very gud n helpful 4 all.. its made using flash ,photoshop,html,css etc.
its www.webdesigningcompany.net .

[arbie]

Using css and the following code to your style.css

img
{ border-style: none;
}

and the blue border will disappear for all but netscape old version users.

much easier than I anticipated - really hard to find out that it was that easy though!

Might be useful to someone?

[sushil]

here is site where we can see some css tip and tricks
Ten more CSS tricks you may not know
CSS Techniques Roundup - 20 CSS Tips and Tricks