Lebanese University

Faculty of Sciences -Section I

BS-Computer Science

Info 2201

Client-Side Web Development

Semester: 1
Academic year: 2020/2021
Credits: 4
Dr. Abed Safadi
Chapter 6

Tables

2
Chapter Objectives
Describe the recommended use of a table on a web page
Create a basic table with the table, table row, table header, and
table cell elements
Configure table sections with the thead, tbody, and tfoot elements
Style an HTML table with CSS
Describe the purpose of CSS structural pseudo-classes

3
6.1 Table Overview
The purpose of a table is to organize information. In the past, before CSS was well supported
by browsers, tables were also used to format web page layouts. An HTML table is composed
of rows and columns, like a spreadsheet. Each individual table cell is at the intersection of a
specific row and column.

Configure a Table

• Each table begins with a <table> tag and ends with a </table> tag.

• Each table row begins with a <tr> tag and ends with a </tr> tag.

• Each cell (table data) begins with a <td> tag and ends with a </td> tag.

• Table cells can contain text, graphics, and other HTML elements.

4
6.1 Table Example

5
6.1 Tables Attributes
The border Attribute : When following HTML5 syntax, code border="1" to cause the
browser to render default borders around the table and table cells.

Table Captions: The caption element is often used with a table to describe its contents.
The caption begins with a <caption> tag and ends with a </caption> tag. The text contained
within the caption element displays on the web page above the table

6
6.2 Table Rows, Cells, and Headers
Table Data Element: The table data element configures a cell within a row in a table on a
web page. The table cell begins with a <td> tag and ends with a </td> tag.

Attributes of the table data and table header cell elements:

Attribute Value Purpose

colspan Numeric value The number of columns
spanned by a cell

rowspan Numeric value The number of rows

spanned by a
cell

7
6.2 Table Rows, Cells, and Headers
Example:

8
6.2 Table Rows, Cells, and Headers
Example:

9
6.2 Table Rows, Cells, and Headers
Table Header Element: The table header element is similar to a table data element and
configures a cell within a row in a table on a web page. Its purpose is to configure column
and row headings. Text displayed within a table header element is centered and bold.
The table header element begins with a <th> tag and ends with a </th> tag.

10
6.3 Style a Table with CSS
Before CSS was well supported by browsers, it was common practice to configure the visual
elements of a table with HTML attributes. The modern approach is to use CSS to style a
table. In this section, you’ll explore using CSS to style the border, padding, alignment,
width, height, vertical alignment, and background of table elements..

CSS properties used to style tables:

HTML Attribute CSS Property
align To align a table, configure the width and
margin properties for the table selector. For
example, to center a table with a width of
75% of the container element, use
table { width: 75%; margin: auto; } To align
items within table cells, use text-align
width Specifies the width of the table
height Specifies the height of the table
bgcolor background-color
border border, border-style, border-spacing
11
6.3 Style a Table with CSS
CSS properties used to style tables:
.

Width: 30%

Margin-left

Border

12
6.3 Style a Table with CSS
CSS properties used to style tables:
.
HTML Attribute CSS Property
Padding An element's padding is the space between
its content and its border.

The padding property is a shorthand

property for the following individual padding
properties:
• padding-top
• padding-right
• padding-bottom
• padding-left
If the padding property has four values:
padding:10px 5px 15px 20px;

top padding is 10px

right padding is 5px
bottom padding is 15px
left padding is 20px
13
6.3 Style a Table with CSS
.
Padding-top

Padding-left

14
6.3 Style a Table with CSS

15
6.3 Style a Table with CSS

Table.html

16
 6.4 CSS3 Structural Pseudo-
Classes
• In the previous section, you configured CSS and applied a class to every other table row to
configure alternating background colors. You may have found this to be a bit inconvenient
and wondered if there was a more efficient method. Well, there is! CSS3 structural pseudo-
class selectors allow you to select and apply classes to elements based on their position in the
structure of the document, such as every other row.

Pseudo-class Purpose
:first-of type Applies to the first element of the
specified type
:last-of-type Applies to the last element of the
specified type
:nth-of-type(n) Applies to the “nth” element of the
specified type. Values: a number, odd, or
even

17
 6.4 CSS3 Structural Pseudo-
Classes-Hands-on-Practice
 Launch a text editor and open Table.html (Slide 14-15). Save the file as Table 2.html.

 View the source code and notice that the second and fourth tr elements are assigned to the altrow
class. You won’t need this class assignment when using CSS3 structural pseudo-class selectors.
Delete class="altrow" from the tr elements.

 Examine the embedded CSS and locate the altrow class. Change the selector to use a structural
pseudo-class that will apply the style to the even-numbered table rows. Replace .altrow with
tr:nth-oftype( even) as shown in the following CSS declaration:

tr:nth-of-type(even) { background-color: #eaeaea; }

 Let’s
configure the first row to have a dark blue background (#006) and light gray text
(#EAEAEA) with the :first-of-type structural pseudoclass. Add the following to the embedded CSS:

tr:first-of-type { background-color: #006; color: #EAEAEA; }

 Save the file and open your page in a browser.

18
6.4 CSS3 Structural Pseudo-
Classes-Hands-on-Practice

19
6.4 CSS3 Structural Pseudo-
Classes-Hands-on-Practice

20
 6.5 Configure Table Sections
There are a lot of configuration options for coding tables. Table rows can be put
together into three types of groups: table head with <thead>, table body with
<tbody>, and table footer with <tfoot>.

These groups can be useful when you need to configure the areas in the table in
different ways, using either attributes or CSS. The <tbody> tag is required if you
configure a <thead> or <tfoot> area, although you can omit either the table head or
table footer if you like.

21
6.5 Configure Table Sections-
Example

22
 6.5 Configure Table Sections-
Example
The CSS code is:

table { width: 200px;

margin: auto; }

caption { font-size: 2em;

font-weight: bold; }

thead { background-color: #EAEAEA; }

tbody { font-family: Arial, sans-serif;

font-size: .90em; }

tbody td { border-bottom: 1px #000033 dashed;

padding-left: 25px; }

tfoot { background-color: #EAEAEA;

font-weight: bold; text-align: center; } 23
 6.5 Configure Table Sections-
Example
The HTML for the table is:

24