/    Sign up×
Community /Pin to ProfileBookmark

CSS for HTML tables

Copy linkTweet thisAlerts:
Jan 13.2007

Is it possible to define CSS style rules for html tables? Particularly I would like to define a style for bgcolor and <table> or <td> width to replace the same code in html.

Html
————————–

<td width=”16%” bgcolor=#FF4747 align=”left” valign=”top”>
<img src=”img/100YearsLogo.gif” width=”160″ height=”209″ alt=”Celebrating 100 Years of Radio, 12 December 1901-2001″> <br>
<span class=”navigation-heading”>Bakelite Radios</span>
<p><span class=”link”><a href=”#heading1″>Crosley Model F5-TWE</a></span></p>
<p><span class=”link”><a href=”#heading2″>Crosley Model 517</a></span></p>
<p><span class=”link”><a href=”#heading3″>Philco Model 49-603</a></span></p>
<p><span class=”link”><a href=”#heading4″>Motorola Model 5R1</a></span></p>
<p><span class=”link”><a href=”#heading5″>Grundig Model 940W</a></span></p>
</td>
<td valign=”top” align=”left”>

to post a comment
CSS

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@tome100Jan 13.2007 — table {

background-color: #myColor;

width: myWidth;

text-align: top;

align: left;

}

or

table td {

}
Copy linkTweet thisAlerts:
@thechasboiJan 14.2007 — slyth

this is a great way of making classes for tables on the page if they are all the same.


table {

background-color: #myColor;

width: myWidth;

text-align: top;

align: left;

}

or

table td {

}

But if you want a specific table to have a specific style then you need to assign that table a unique id value. Then

#tableName { /* pound must be there this is just a css comment*/

background-color: #myColor;

width: myWidth;

text-align: top;

align: left;

}

or

#tableName td {

}
Copy linkTweet thisAlerts:
@slythauthorJan 14.2007 — Thanks, how do u use the style within the html code?
Copy linkTweet thisAlerts:
@tome100Jan 14.2007 — <html>

<head>

<style>

table {

background-color: #myColor;

width: myWidth;

text-align: top;

align: left;

}

</style>

</head>

<body>

BODY CONTENT

</body>

</html>
Copy linkTweet thisAlerts:
@slythauthorJan 15.2007 — Does it work when the style sheet is an external file? I had tested it, but I couldn't get the code working.
Copy linkTweet thisAlerts:
@WebJoelJan 15.2007 — If properly referanced, yes. External is even preferable, because the browser will then 'cache' the CSS data into memory and re-use it on another page, if necessary. If you include the same <style></style> in every page, the browser must re-read/re-load it, every time. This 'bulks up' the weight of your page and spiders/'bots don't index your CSS, -but they do have to 'read thru it' trying to find index-able data in your page... ?
<link rel="stylesheet" href="myStylesheet.css" type="text/css" />[/QUOTE] This assumes a stylesheet name "myStylesheet.css" in the same directory as index.html

Also, -since you asked a ? 'noobie'-type question earlier in the thread, I must ask: -how did you save your external CSS file? You DID strip-out the "<style>" from the beginning and the "</style>" from the end of the file, right? If not, you need to. A "CSS file" does not require being told that it is "<style></style>".
×

Success!

Help @slyth spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...