The third and final part of our Back to the Basics Web Series will focus on understanding Div tags and Table tags. Along with a host of best practices.

Part 1: Div Tags

The <div> tag is nothing more than a container for other tags. Much like the body tag, Div elements are block elements and work behind the scenes grouping other tags together. Best practice would have you style Div’s by assigning Class Names or ID’s and not to style them directly into the Div Tag. Doing so could override styling done in a style sheet and would keep your html from any 508 compliancy.

When HTML first began, web creators only had two choices. A table layout, or frames. The div element provides a 3rd alternative, since a div can contain any/every other type of html element within its beginning and ending tag.

In our first html example we simply added our content and positioned it without any framing or containment for our content, but with more content comes more issues of having to place web parts in specific area and possibly a google map in the left hand side of the page and an advertisement on the right side of the page.

So let’s take our original example and add a div container around all of our content including our navigation.

Before:

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN”>

<html>

<head>

<title>TCSC CSS Project</title>

</head>

<body>

<!– Site navigation menu –>

<li><a href=”support.html”>Support</a>

<li><a href=”Contacts.html”>Contacts</a>

</ul>

<!– Main content –>

<h1 id=”TCSCh1″>This is the Title of My Content</h1>

<p>Welcome to my CSS site!</p>

<p>Right now this page lacks any style, but soon that should change in a few simple tests.</p>

<p>Plain is borning anyways, so let’s get started.</p>

</body>

</html>

After:

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN”>

<html>

<head>

<title>TCSC CSS Project</title>

</head>

<body>

<!– Site navigation menu –><div>

<li><a href=”support.html”>Support</a>

<li><a href=”Contacts.html”>Contacts</a>

</ul>

<!– Main content –>

<h1 id=”TCSCh1″>This is the Title of My Content</h1>

<p>Welcome to my CSS site!</p>

<p>Right now this page lacks any style, but soon that should change in a few simple tests.</p>

<p>Plain is boring anyways, so let’s get started.</p></div>

</body>

</html>

You will notice that nothing has changed on the page when viewed in the browser. We simply now have a container around our content. I also now want to add two containers within our outer div container. One to hold our navigation and the other to hold our main content area.

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN”>

<html>

<head>

<title>TCSC CSS Project</title>

</head>

<body>

<!– Site navigation menu –><div><div>

<li><a href=”support.html”>Support</a>

<li><a href=”Contacts.html”>Contacts</a>

</ul>

</div>

<!– Main content –><div>

<h1 id=”TCSCh1″>This is the Title of My Content</h1>

<p>Welcome to my CSS site!</p>

<p>Right now this page lacks any style, but soon that should change in a few simple tests.</p>

<p>Plain is boring anyways, so let’s get started.</p></div></div>

</body>

</html>

I now want to add some classes and id’s to our new div’s so that we can style each piece and allow custom positioning on the page.

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN”>

<html>

<head>

<title>TCSC CSS Project</title>

</head>

<body>

<!– Site navigation menu –><div class=”TCSCcsspage”><div id=”navigation”>

<li><a href=”support.html”>Support</a>

<li><a href=”Contacts.html”>Contacts</a>

</ul>

</div>

<!– Main content –><div id=”content”>

<h1 id=”TCSCh1″>This is the Title of My Content</h1>

<p>Welcome to my CSS site!</p>

<p>Right now this page lacks any style, but soon that should change in a few simple tests.</p>

<p>Plain is boring anyways, so let’s get started.</p></div></div>

</body>

</html>

For the outside content containing div I chose the class name “TCSCcsspage”. This will be the first time I have used a Class Name instead of an ID. It is more of a preference and not a specific rule of thumb class names will show up more in tables and table cells, but not always. I chose a class name since content can repeat and it’s not a specific one and done area and also to show you how class names are styled and created. For the navigation div container I chose the ID Name “navigation” and finally for the content area I chose the ID Name “content”.

If you noticed above that the name of my css reference changed from TCSC.css to TCSCdiv.css. I am simply make a copy of my original css file and renaming it to the new style sheet name for organizational purposes and to retain the original file to refer to. We will no longer be linking to or editing the original style sheet.

In our TCSCdiv.css file we want to add new style properties for our newly created “unocsspage” div. First we want to give this div a fixed width of 800px and then give it a custom background image.

Here is how our stylesheet should look with the TCSCcsspage Div being styled.

.TCSCcsspage{

width:800px;

background-image:url(‘images/gradient.jpg’);

background-repeat:repeat-x;

background-position:top left;

background-color:#c7cac8;

padding:8px;

border: solid 2px #000000;

}

Here is an explanation for which each of these style properties are doing for the Div Tag:

1. .TCSCcsspage: The “.” (period) before the TCSCcsspage represents Class Name. We previously used a “#” symbol before the names to represent ID Name.

2. Width: Sets the width of an element. By setting width to 800 pixels, the content on the page will no longer stretch across the whole monitor, but sty the same size regardless of monitor size and type, ie. Widescreen monitors vs. standard width monitors.

3. Background-image:
Sets the background image for an element. I create an “images” directory at the root level of my site that will house the images that I have created for my website. In that directory I placed an image titled “gradient.jpg”.

4. Background-repeat: Sets how a background image will be repeated. My image is only 1 pixel wide and I need it to fill up the entire width of my fixed width “TCSCcsspage” Div. To do this I set the background-repeat property to repeat-x, which will tell the image to repeat horizontally within my Div.

5. Background-position: Sets the starting position of a background image. I want my gradient image to start repeating at the top left of my “TCSCcsspage” Div and have the darker shades of the image to show at the bottom of my “TCSCcsspage” Div.

6. Background-color: Sets the background color of an element. By setting the background color to “#c7cac8″ I allow the content of my “TCSCcsspage” Div to grow higher than my background-image, but stay seamless by having the background color the same as the bottom half of my gradient.

7. Padding: Sets all the padding properties in one declaration. By setting the padding to 8 pixels, none of my content will stay flush to the edge of the Div, but allow for spacing away from the edge of the Div.

8. Border: Sets all the border properties in one declaration. By setting the border to a solid 2 pixel line all the way around the “TCSCcsspage” Div, we get some separation from the green background of the page.

In our TCSCdiv.css file we want to add new style properties for our newly created “navigation” div.

Here is how our style sheet should look with the navigation Div being styled.

#navigation{

float:left;

}

ul#navbar {

list-style-type: none;

padding: 0;

margin: 0;

position: absolute; (Remove this Attribute)

top: 2em;

left: 1em;

width: 150px; }

Here is an explanation for which each of these style properties are doing for the Div Tag:

1. Float: Specifies whether or not a box should float. By setting the float attribute to left and removing the

Position: absolute attribute from the ul#navbar Class ID, we can now have the navigation sit where we want instead of static and absolute. In this case the navigation would be the top left side of our “TCSCcsspage” Div. A float is simply a box (for example, a div) that is shifted to the left side or the right side of its container. We then say that the box is floated left or floated right.

One of the key benefits of floats is that they allow you to have bits of content sitting side by side, rather than one below the other (much like you can do with table columns, but better!). This allows you to do cool stuff like text columns, boxouts (like the one above), and advanced positioning of your page elements.

Floats are a bit like the align=”left” and align=”right” attributes in img elements.

In our TCSCdiv.css file we want to add new style properties for our newly created “content” div.

#content{

margin-left:200px;

}

Here is how our style sheet should look with the content Div being styled.

Here is an explanation for which each of these style properties are doing for the Div Tag:

1. Margin-left: Sets the left margin of an element. By setting the Left Margin to 200 pixels, my content will not wrap underneath my navigation.

Now we will be changing our navigation some so that we can have our tabs use a green background and change our fonts to be white.

ul#navbar li {

background: #007f36;

margin: 0.5em 0;

padding: 0.3em;

border-right: 15px solid black ;

}

ul#navbar a {

text-decoration: none;

font-family:Arial;

color:#ffffff;

font-size:10pt;

}

ul#navbar a:hover{

text-decoration: underline;

color:#ffffff;

}

Next we are going to make our “TCSCcsspage” Div stay in the center of the page by removing the 200 pixel left padding from the body style attribute and also adding a couple of margin styles to our “TCSCcsspage” Div.

body {

padding-left: 200px; (Remove this Attribute)

font-family: Georgia, “Times New Roman”, Times, serif;

color: #ffffff;
background-color: #007f36; }

.TCSCcsspage{

width:800px;

background-image:url(‘images/gradient.jpg’);

background-repeat:repeat-x;

background-position:top left;

background-color:#c7cac8;

padding:8px;

border: solid 2px #000000;

margin-left:auto;

margin-right:auto;

}

The margin-left and margin-right style properties are added and set to auto, which positions the “TCSCcsspage” Div to the middle of our page.

CSS Overrides:
CSS code can override other existing CSS code depending on how it is implemented. Say you had redefined the p tag in an external stylesheet. If you redefine it again in the head section of a document, this definition will be the one that is used, as it is closer to the things that it affects. Adding css using the style attribute will override anything else that has been specified elsewhere.

@import ” TCSC2.css”;

@import ” TCSC.css”;

</style>

<title>TCSC CSS Project</title>

Overriding-wise, the sheet imported last will override the imported ones that come before — i.e. in the example above, TCSC.css’ has more weight than TCSC2.css’ because it is imported below it. Imported stylesheets have the least influence over the final presentation of a page overall, as linked sheets will override them. So we finally have a full cascade order:

•the style attribute overrides

•a style block, which overrides

•a linked stylesheet, which overrides

•an imported sheet.

Part 2: Table Tags

The <table> tag is used to begin a table. Within a table element are the <tr> (table rows) and <td> (table columns or cells) tags. Tables are a handy way to create a site’s layout, but it does take some getting used to. Here’s how to make a table.

</table>

Row 1 Cell 1	Row 1 Cell 2
Row 2 Cell 1	Row 2 Cell 2

Content is placed within table cells. A table cell is defined by <td> and </td>. The border attribute defines how wide the table’s border will be.

Spanning Multiple Rows and Cells

Use rowspan to span multiple rows and colspan to span multiple columns.

Note: if you would like to place headers at the top of your columns, use the <th> tag as shown below. By default these headers are bold to set them apart from the rest of your table’s content.

HTML Code:

<tr>

<th>Column 1</th>

<th>Column 2</th>

<th>Column 3</th>

</tr>

</table>

Column 1	Column 2	Column 3
Row 1 Cell 1	Row 1 Cell 2	Row 1 Cell 3
Row 1 Cell 1	Row 2 Cell 2	Row 2 Cell 3
Row 3 Cell 1

Cell Padding and Spacing

With the cellpadding and cellspacing attributes you will be able to adjust the white space on your tables. Spacing defines the width of the border, while padding represents the distance between cell borders and the content within. Color has been added to the table to emphasize these attributes. The cellspacing will giving you the white space as shown below between each border.

HTML Code:

<table border=”1″ cellspacing=”1″

bgcolor=”rgb(0,255,0)”>

<tr>

<th>Column 1</th>

<th>Column 2</th>

</tr>

</table>

Column 1	Column 2
Row 1 Cell 1	Row 1 Cell 2
Row 2 Cell 1	Row 2 Cell 2

CSS Classes and Styling for HTML Tables

Since Tables are repeated throughout a site we will use Class Names to style our Tables, Table Rows, Table Headers and Table Cells or Columns.

The TH element defines a header cell in a table. TH elements are contained within a TR element (a table row), which may also contain TD elements for data cells. When a cell’s contents act as both header information and table data, TD should be used.

The TR Element defines a row in an HTML table. A tr element contains one or more th or td elements.

The TD Element defines a standard cell in an HTML table.

An HTML table has two kinds of cells:

•Header cells – contains header information (created with the th element)

•Standard cells – contains data (created with the td element)

The text in a th element is bold and centered.

The text in a td element is regular and left-aligned.

With no CSS classes specified in any elements, it will be hard to style a table with much customization. You can add styling to the table, tr, th and td tags but they will have to be uniformly defined. You will have a lot more flexibility if add more classes to each element like below:

<tr>

<th>Phone number</th>

<th class=”last”> Date of birth </th>

</tr>

<td class=”name”>Jake Jester</td>

</tr>

<td class=”name”>Nancy Applejack </td>

</tr>

</table>

Notice I applied classes to the table, each of the alternating rows and each of the columns. And also notice I added cellpadding=”0″ cellspacing=”0″ border=”1″ to the table tag. This is very important since CSS does not have direct cellpadding and cellspacing controls, you cannot take away the natural cellpadding & cellspacing each browser applies to all tables. It’s the best to set them to 0 and control everything via CSS.

To get borders on tables, always add border definition on td and th tags.

Now let’s give the table header a different background color, add the alternating colors and border colors.

/* _lcid=”1033″ _version=”14.0.4762″

_LocalBinding */

table.staff {

width: 100%;

border-collapse: collapse;

border-bottom: 1px solid #000;

}

table.staff th,

table.staff td {

padding: 5px;

text-align: left;

font-family: Arial, Verdana, sans-serif;

border: 1px solid #000;

border-bottom:0;

}

table.staff th {

background-color: #007f36;

color: #ffffff;

border-bottom: 2px solid #000;

}

table.staff tr.odd {

background-color: #f8f8f8;

}

table.staff tr.odd td {

border-top: 1px solid #007f36;

}

table.staff tr.even {

background-color: #fff;

}

table.staff tr.even td {

border-top: 1px solid #007f36;

}

S	M	T	W	T	F	S
« May				Jul »
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30

Back to the Basics: CSS Styling and HTML Development (Part 3) Div’s and Tables

Part 2: Table Tags

Leave a Reply Cancel reply

Recent Posts

Categories

Twitter

Archives

Meta

Back to the Basics: CSS Styling and HTML Development (Part 3) Div’s and Tables

Part 2: Table Tags

Leave a Reply Cancel reply

Follow Us!

Recent Posts

Categories

Tags

Twitter

Archives

Meta