I was watching your new advanced CSS on Kelby Training last night and it brought up some questions that I hope you will answer for me. I have been a coder for a very long time and much of my work nowadays involves PHP code and MySQL. I have been using the <div> tag and CSS for a very long time to control layouts, but I have to admit that I have not used CSS to format my tables. I would have to presume that that is why my tables look like crap. Your videos on CSS using Dreamweaver have inspired me to let go of table properties and try to use CSS; however, I have a couple of unresolved issues, one that came up in your advanced lesson and another that you didn’t raise.
First, you bordered the <td> tag on the right and bottom, but I noticed what appeared to be a double border on the final column and the last row. How do you clean that up? Second, very often, especially when I construct a form, I need to vary the alignment of the columns. For example, I like the field IDs right-justified and the form fields left-justified. How do you do that? Maybe I shouldn’t be using a table for my forms at all — what do you think?
Before I forget, thank you for doing a great job presenting these two lessons on CSS. My main focus for Kelby Training is my photography, but I was bored one evening and saw your lovely face and wondered what kind of lessons you taught. I thought, “I could use a refresher course in CSS, why not?” You have a soothing voice and a very clear style of instruction that I really appreciate. You also cleared up the use of “clear.” That one has mystified me since the beginning. I usually make it work, but to be honest, I don’t know why or how and I never thought about using it in a <br /> tag. Great idea! You also made me see just how cool Dreamweaver is, and you’re tempting me to drift away from coding just a little to try it out.
I look forward to hearing from you.
Thank you for your kind words about my new Kelby Training videos on CSS. I’m pleased to know that I’ve inspired you to use CSS, even when you create tables, and that you’ve come to better appreciate some of the advantages of using Dreamweaver to develop page designs.
You ask an excellent question about table borders. Here are a couple of alternatives you may want to consider:
- You can alter the styles I show in my video to prevent the double borders by setting the Table <table> border to only appear on the left and bottom of the table and the Table Data <td> border to only appear on the top and right. That still won’t create a clean, solid border, but you won’t get the doubled border.
- Another alternative many people use is to define a border for all sides of the table tag (which creates a border around the outside of the table) and then use a background color for every other row within the table. This creates a table with colored rows instead of borders, a great way to distinguish the rows of content without using a border on the table data cells, which as you’ve noticed can be problematic.
- If you really want a clean, solid border like you’re used to, you can use the border attribute of the table cell (it is safe to assume the border attribute will continue to be supported by browsers for many years to come, even if it doesn’t conform to the latest, strictest standards). If you go with this option, I still suggest you use CSS instead of HTML attributes for everything other than the table border.
- As for applying different style rules to table data cells, the best option there is to use class styles. If you use this approach, create one style called something like .align-left and another called .align-center, and then the HTML code would look like this:
<td class=”align-left”>content</td><td class=”align-center”>content</td>
I hope that helps and I wish you all the best with your web designs,