Member Avatar for Mindy Sue

I am working with Dreamweaver CS4 and am still in the learning process of CSS and HTML and Dreamweaver. I hope I can explain this the way that it is in my head.... I have made a table on one page, and I want to make a table on another page that is a different size. I have the code in the style.css folder, how do I place the code for the other table and keep them separate. I certainly hope this makes sense.

  • 4 Contributors
  • 3 Replies
  • 108 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by nkdweb

Dani AI

Generated

Short answer: keep the different table styles in your stylesheet and give each table a distinct class or ID so they don't affect one another. is on the right track with classes; 's inline style will work for a quick one-off, but it makes future edits harder and can be overridden by other CSS.

Quick Dreamweaver CS4 workflow

  • Put your style rules in the external style.css (or a second sheet if you prefer a page-specific file).
  • In Dreamweaver you can create a class rule from the CSS Styles panel (save it into style.css) or edit the CSS file directly.
  • On the page, select the table and choose the class from the Properties inspector or add the class attribute in code view.
    If the style is truly unique to one page, attaching a second stylesheet to just that page is fine.

Troubleshooting and tips

  • If a class doesn't apply, check that the page actually links to the CSS file, clear browser cache, and watch CSS specificity/order: a general table {} rule can be overridden by a more specific class rule or by rule order. Inline styles win over stylesheet rules.
  • Use semantic/modifier names (for example a base table class plus a compact/wide modifier) so you only change what you need (like width) without duplicating all table styling.
  • For responsive layouts prefer max-width or percent widths rather than fixed pixels, and consider overflow-x:auto on the container for small screens.
  • Keep accessibility in mind: use <caption> and proper header cells (<th scope="col">) rather than styling alone.

Example pattern (add to style.css and assign the classes in Dreamweaver):

/* style.css */
.tbl { border-collapse: collapse; width: 100%; }
.tbl--compact { max-width: 420px; }
.tbl--wide    { max-width: 920px; }

Use class="tbl tbl--compact" on the page where you want the smaller table. This keeps styles centralized and easy to maintain.

Recommended Answers

All 3 Replies

Member Avatar for macneato

Very VERY easy.

Use classes. If im getting what you saying right. You currently using something like this

table {
width: 200px;
border: 1px solid #000
}

So if you had to use classes it would change to this;

table.shortwidth {
width: 200px;
border: 1px solid #000
}

table.standard {
width: 300px;
border: 1px solid #000
}

Then just assign them in your HTML

<table class="standard">
<tr>
 <td>
  &npsp;
 <td>
</tr>
</table>
Member Avatar for ArtphotoasiA

Good idea macneato !

This is the way to use CSS

Normally I do not use table and sometimes forget that table tag support CSS on it! and not just for border or colors

Member Avatar for nkdweb

You can also use inline CSS where you created the table, like below

<table style="width:20%">
-
-
-</table>

<table style="width:50%">
-
-
-
</table>

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.