/    Sign up×
Community /Pin to ProfileBookmark

Table HTML -> CSS Styles

I’d like to recreate this table below to a form where the only attribute I have to set is a CSS style to the table, like not having to set cellspacing, border, etc. but I’m not having much luck. Help?

[CODE]<table width=”100%” border=”0″ cellspacing=”1″ cellpadding=”2″ bgcolor=”#222222″ align=”center”>

<tr>
<td width=”100%” align=”left” bgcolor=”#303030″><span class=”headline”>{subject}</span></td>
</tr>
<tr>
<td width=”100%” bgcolor=”#303030″ align=”left”><img src=”http://www.fgcomics.com/images/spacer.gif” width=”10″ height=”30″>{icon}</td>
</tr>
<tr>
<td width=”100%” bgcolor=”#303030″ valign=”top” align=”left”><span class=”copyright”>Posted by {user} on {date}</span></td>
</tr>
<tr>
<td class=”text_default” width=”100%” bgcolor=”#393939″ colspan=”3″>
<p>{news}</p>
{fullstory}
</td>
</tr>
</table>
<br>[/CODE]

to post a comment
CSS

2 Comments(s)

Copy linkTweet thisAlerts:
@bob871Dec 14.2005 — <html>

<head>

<title>Table</title>

<style type="text/css">

<!--

table.first { border: 1px solid #000000;

padding:20px;

width:650px;

bgcolor:#222222;

}

td.second { border: 0px solid #000000;

padding:10px;

width:650px;

font-family:Verdana; font-size:12px; color:#000000;

background-color:#808080;

}

td.third { border: 1px solid #777777;

padding:10px;

width:650px;

background-color:#800080;

font-family:Verdana; font-size:12px; color:#FFFFFF;font-weight:normal

}

td.fourth { border: 1px solid #777777;

padding:5px;

width:650px;

background-color:#FFCCCC;

font-family:Verdana;

font-size:12px;

color:#000000;

font-weight:bold;

}

td.fifth { border: 1px solid #777777;

padding:10px;

width:650px;

background-color:#008080;

font-family:Verdana;

font-size:12px;

color:#FFFFFF;

font-weight:normal;

}

.headline{font-family: Verdana;

font-size: 12px;

text-decoration: underline;

color: #FFFF00;

font-weight: bold}

-->

</style>

</head>

<body>

<table class="first">

<tr>

<td class="second"><span class="headline">{subject}</span></td>

</tr>

<tr>

<td class="third">

<img src="http://www.fgcomics.com/images/spacer.gif" width="10" height="30">{icon}</td>

</tr>

<tr>

<td class="fourth"><span class="copyright">Posted by {user} on {date}</span></td>

</tr>

<tr>

<td class="fifth">

<br>{news}<br>

{fullstory} </td>

</tr>

</table>

<br>

</body>

</html>
Copy linkTweet thisAlerts:
@ray326Dec 14.2005 — Instead of a table what you need is real structure. E.g.

<dl style="newsitem">

<dt>{subject}</dt>

<dd class="copyright">Posted by {user} on {date}</dd>

<dd class="news">{news}</dd>

<dd class="story">{fullstory}</dd>

</dl>
×

Success!

Help @Funny_Guy 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.20,
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,
)...