CS403 Table Example 4 Using CSS

This page is the same as Table Example 2 except that we have used embedded CSS rules to change the appearance of the page.

Basic Table 1

Ann	100	89	85
Stephanie	78	88	93
Brian	91	98	86
John	75	87	82

In this table we are representing four CS403 students and their grades on the quiz, first exam, and second exam. Notice that the table consists of 4 rows with 4 data cells in each row.

---

Basic Table 2

Ann	100	89	85
Stephanie	78	88	93
Brian	91	98	86
John	75	87	82

This is the same as the first table except that we have added cellpadding and cellspacing attributes to the <table> tag. In this example, cellpadding is adding 10 pixels of space around the contents of each cell; cellspacing increases the size of the dividers by 5 pixels.

---

Basic Table 3

Name	Grades
Ann	100	89	85
Stephanie	78	88	93
Brian	91	98	86
John	75	87	82

Oops... Here we added an extra row to the top of the table to allow us to include heading information but this is not what we want it to look like! We used the <th> tag to indicate that the cells were going to contain heading information but we would like the Grades heading to span the three grade columns. Let's try it again...

---

Basic Table 4

Name	Grades
Ann	100	89	85
Stephanie	78	88	93
Brian	91	98	86
John	75	87	82

Well that is better! Notice that we used the colspan attribute within the <th> tag and set it equal to 3 to indicate that we wanted this cell to span three columns.

---

Basic Table 5

Name	Grades
Quiz	Exam 1	Exam 2
Ann	100	89	85
Stephanie	78	88	93
Brian	91	98	86
John	75	87	82

Here we were trying to provide sub-headings for each of the three grades but this is not what we wanted it to look like...

---

Basic Table 6

Name	Grades
	Quiz	Exam 1	Exam 2
Ann	100	89	85
Stephanie	78	88	93
Brian	91	98	86
John	75	87	82

Okay - that looks much better! All we needed to do was specify in the first row that the first cell needed to span 2 rows (that is, the cell that contained the word Name) so we added the rowspan attribute to it and set it equal to 2!

---

Some things to notice...

• Column width is determined by the cell in that column with the widest contents. In the tables above the name Stephanie is longer than the other names so the column is made wide enough to contain it.
• The contents of data cells (those created with the <td> tag) are left justified and centered vertically.
• Header cells (those created with the <th> tag) center their contents vertically and horizontally as well as make the text bold.
• To make the table wider, use the width attribute of the <table> tag. You can assign an absolute pixel value or a percentage of the width of the page:

  Basic Table 7

  Name	Grades
  	Quiz	Exam 1	Exam 2
  Ann	100	89	85
  Stephanie	78	88	93
  Brian	91	98	86
  John	75	87	82

  Note that you can also use the width attribute within <td> tags and <th> tags in order to make the columns uniform. When doing this, it is only necessary to specify the width one time per column, preferably in one of the rows near the top of the table. In the table below we have made all three of the grade columns the same width. Each column is 20% the width of the table:

  Basic Table 7

  Name	Grades
  	Quiz	Exam 1	Exam 2
  Ann	100	89	85
  Stephanie	78	88	93
  Brian	91	98	86
  John	75	87	82