beeen a whileCreating Identical Tables: HTML and CSS
Well this is more of a tutorial than an article or editorial, but at the moment I am not up to creating a whole new section for html tutorials quite yet when I only have one tutorial written. Though I hope you enjoy the read.
We will be examining how to create two identical tables using HTML tables and replicating the effect in CSS. To start off, right click this link and save it to your computer. Now open it with notepad.
Note: Before proceeding, you may notice that when you open the html file the two are not EXACTLY identical. That is because the way different browsers interpret CSS a bit differently. You can make adjustments when you are finished with this tutorial to fit your needs.
Step 1. We will be skipping the CSS part for now, you should scroll down to where the commented line states "Table Code to Examine". You will notice that I have added the widths, padding, cellspacing, and background color manually along with aligning the text in standard HTML table coding. I use the style attribute to give the table a nice border.
Now how would we begin creating a CSS replication of this table? Well, quite simply, we will be creating a div style for each of the table elements, disregarding the table rows (<tr>). That means every table element that contains specific settings will require a div style.
We will first work on the <table> element. Our div style for this will act as a container to hold the CSS div elements inside of it. As you see, the table width is 400 pixels, has a padding of 5, cellspacing of 6, and a defined border in the HTML table. If you scroll up to the "CSS Code to Examine" comment line you should see "div.example{" listed under it. This is the exact same as what we just did with the HTML table code.
Explanation: The example "floats" to the left so that it may contain data within. We set the width to 388 pixels. Why 388 pixels you ask? A table width of 400 pixels in HTML code considers that the border width and padding is factored into the 400 pixels in width. Therefore, since we have a padding of 5 pixels on both the left and right of our example, and a border of 1 on each side, that would calculate to 12 pixels used for padding and border width. We subtract that from the 400 to get 388 pixels. The padding is simple. We have 5 pixels on every side (order is like a map - North, East, South, West) except the bottom side in which I'll explain later. We then simply add the border width to 1 pixel, solid, and a defined color.
Step 2. Now, we defined the first element, we will define the <td> element which contains a width of 400, centered text, a background color of #F1F2F3, 1 border width and a defined color. We disregard the column span (colspan="2") because CSS doesn't use this. You should now scroll to the section under the CSS Code comment to the "div.headfoot{" style.
Explanation: The element must "float: left;" in order to be contained inside the previous div we created. We set the width to 386 pixels this time, applying the same knowledge we have from the first div. We factor in the border width and padding - in this case we only have a border of 2 so we get 386 pixels. We then define "margin-bottom: 5px;" to give the cell some spacing. We will be doing similar to the other divs to make sure all sides have an even spacing of 5 pixels. Now we set "text-align: center;" to center the text, set the border exactly like the table code, and define a border-color.
Step 3. Now we only have two more elements to define! Our left and right cells. Go back down to the HTML Table Code and you should examine that the width of each cell is 200 pixels wide, text is centered, and a styled border. We again disregard the column span. Now go up to the CSS Code comment and find where it says "div.leftcell{".
Explanation: The element must "clear: left;" in order to ensure that there is nothing to the left of the new div and be placed below any divs before it. We again use "float: left;" so that divs may float next to it. This time we define the width as 188 pixels. We do this because we will will be having 5 pixels to the left, 5 to the right, and 5 to the right of the rightcell along with 4 pixels of border for both cells combined. This gives a final of 19 pixels from the total 400 which would give you 381 pixels. We divide this by 2 and get 190 pixels. So why do we use 188 pixels? We use 188 pixels because both Internet Explorer and Firefox browser interpret CSS slightly different, and using widths that exceed the container can cause the cells to automatically go to the next line as it cannot fit. We also use a margin-right of 5 pixels which allows spacing for the right cell and a margin-bottom of 5 pixels to allow the cells below it to have spacing between them. We again set the border and align the text to center.
Step 4. The final div! This div is exactly the same as the previous except a few changes, so lets go directly to the "div.rightcell{" element and take a look. This time we can toss the "clear: left" out because we want it to float directly to the right of the other cell. We also don't need margin-right as there will be nothing to the right of the cell, and we define the width exactly the same as the left cell.
Step 5. We are done! Creating the styles at least. To use these elements is quite simple. Go down to the comment line where it says "CSS Table Replication" and you can see our style in use.
Explanation: We first create a div using the class "example" which is our table container. We then add another div with the class "headfoot" which is our <td> which had a column span of 2 and place our text within the div. We again create another div, this time with the class "leftcell" and place our text in there, followed by another div with the class "rightcell" and it's text. We finish it off by adding the "headfoot" class again with it's text.
All Done. We now are able to replace HTML tables with CSS! The power of CSS is that you can easily modify the style and create a whole new look and feel without having to modify the HTML code itself. It also allows you to easily re-use the styles over and over again throughout your entire website. Beautiful isn't it? Now what are you waiting for? Start writing some CSS tables!
Written by Daniel Moxon