HTML: <div> and <table> tags

Last night, I was busy working on refactoring my blog web pages, as I have inline styles and an external style sheet. My goal is to move all of the style information into the external style sheet.

The normal browser I use is Mozilla, avoiding Outlook at any cost. Mozilla (at least version 1.3.1 and higher) has a cool development tool named DOM Inspector, which is found in the Tools | Web Development menu. This tool is a hidden gem for seeing things like what styles apply to the individual tags and what section of the page the tags apply. I am sure there is more in this tool, but these two things alone helped me tremendously.

I was trying to figure out why some HTML code would not use the style that I was attempting to use. I had some code similar to the following:

   .aclass {
      font-size: 150%;
   }

   <table>
      <tbody>
         <tr>
            <div class=”aclass”>
               <td>
                  bigger text here
               </td>
            </div>
         </tr>
         <tr>
               <td>
                  normal text here
               </td>
         </tr>
      </tbody>
   </table>

When I looked at Mozilla’s DOM Inspector, I noticed that the <div> tags were moved outside of the table definition. Wierd. So I did some googling and came across this link, which points out that a <div> tag is not valid inside a <table> tag.

Eureka! That explained the behavior of the DOM Inspector as well. In my case the solution was to apply the style like this:

   .aclass {
      font-size: 150%;
   }

   <table>
      <thead class=”aclass”>
         <tr>
            <td>
               bigger text here
            </td>
         </tr>
      </thead>
      <tbody>
         <tr>
            <td>
               normal text here
            </td>
         </tr>
      </tbody>
   </table>

So the moral of this story is to keep your <div> tags out of your <table&#62 tags!

Update: The correct moral of the story is to be careful where you put <div> tags when nesting them inside of a table. A good friend recently pointed out that the problem wasn’t with the <div> tag, but rather, where the <div> was being nested. A <div> tag is valid inside of a <td> tag, but not a <tr> tag.

This entry was posted in Uncategorized. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *