Link to home
Start Free TrialLog in
Avatar of JA67
JA67

asked on

Please tell me if I am going about using CSS correctly to style tables.

Hello,

I am setting up CSS elements to place in my <td> tags, so that I can have borders turned on, (of a specified color, etc.) just for the table body, and have no border for what in effect becomes the table header. Is this a common or a good way to go about this? I thought it would be much easier if I could use border="1" and border="0" within <thead> and <tbody> but apparently that does not work.

Thanks,
JA67
Avatar of GrandSchtroumpf
GrandSchtroumpf

Using CSS for presentation is the correct way.
But you should not use inline styles.
Define all your styles in an external stylesheet and include the stylesheet in the header of your html.

Then use a class for your table like this for instance:
<table class="PricingTable">

And use a class selector in your CSS:

table.PricingTable {
  border: 3px solid red;
}

If you want to style your cells:

table.PricingTable th {
  background: blue;
  color: red;
}
table.PricingTable td {
  background: lime;
  color: blue;
}
Avatar of JA67

ASKER


Thanks. That helps. But in building my table, in order to have, for example, a header with no borders and blue background, and a body with borders and a white background, I am having to set up quite a few classes. For example, a class just for the leftmost cell in the top row. Why? Because if all the cells each have all four sides of their borders turned on, then I get thicker borders whereever two borders meet, etc. So I have been setting up classes to take care of this. I have some classes for cells with just; top, bottom and right borders on, etc., so that the borders all just connect to make up the table, rather than overlap and get thicker.

 I hope I am making sense. If you are following me, please let me know if this that I have just described is something that is a normal practice or if there is a much cleaner way to go about this.

Thanks,
Jim
Avatar of JA67

ASKER

Here is an example of what I am doing. And it works great, I just want to be sure I am not doing something really silly.


<thead >
   <tr>
               <td colspan="3" class="HeaderText">
               Client Questions
               </td>
   </tr>
</thead>

   <tbody>
   <tr>
               <td class="Cell_TopRow_LftCrnr_LtBluBg_BluBrdr">
                   <div class="BoldColHdrText">How do we rate?</div>
               </td>
               <td class="Cell_TopRow_LtBluBg_BluBrdr">
                   <div class="BoldColHdrText">Selection</div>
               </td>
               <td class="Cell_TopRow_LtBluBg_BluBrdr">
                   <div class="BoldColHdrText">Response / Comments</div>
               </td>
   </tr>
   <tr>
               <td class="Cell_LftCrnr_WhtBg_BluBrdr" width="302">
                  <div class="TextBoxLable">Professionalism</div>
               </td>
               <td class="Cell_WhtBg_BluBrdr" width="302">
                  <div class="TextBoxLable">Professionalism</div>
               </td>
               <td class="Cell_WhtBg_BluBrdr" width="302">
                  <div class="TextBoxLable">Professionalism</div>
               </td>
   </tr>
ASKER CERTIFIED SOLUTION
Avatar of GrandSchtroumpf
GrandSchtroumpf

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of JA67

ASKER

Thank you!

JA67