MODULE -II

TABLES
 Introducing Tables
 Tables display information in rows and columns; they are commonly
used to display all manner of data that fits in a grid such as train
schedules, television listings, financial reports, and sports results.
 You can think of a table as being very similar to a spreadsheet.
 Introducing Tables
 Each rectangle is known as a cell. A row is made up of a set of cells on
the same line from left to right, and a column is made up of a line of
cells going from top to bottom.
 Here is the code that was used to create this basic table
Introducing Tables
 Created a table in XHTML using the <table> element. Inside the
<table> element, the table is written out row by row.
 A row is contained inside a <tr> element — which stands for table
row.
 Each cell is then written inside the row element using a <td>
element — which stands for table data.
 This time the table includes headings. In this example, the table
shows a financial summary for a small company.
Introducing Tables
 Introducing Tables
 In each row, the first cell is also a table heading cell (indicated using a
<th>), which states which quarter the results are for.
 Then the remaining three cells of each row contain table data and are
contained inside the <td> elements.
 Basic Table Elements and Attributes
 Some of the attributes allow you to create more sophisticated table layouts.
The <table> Element Creates a Table
 The <table> element is the containing element for all tables. It can carry the
following attributes:
 All the universal attributes
 Basic event attributes for scripting
 The <table> element can carry the following deprecated attributes. Even
though they are deprecated, you will still see many of them in use today:
 align bgcolor border cellpadding cellspacing dir frame rules summary width
 Basic Table Elements and Attributes

The align Attribute (Deprecated)

 Although it is deprecated, the align attribute is still frequently used with tables.
 When used with the <table> element, it indicates whether the table should be
aligned to the left (the default), right, or center of the page. (When used with
cells, as you will see shortly, it aligns the content of that cell.) You use the
attribute like so:
<table align="center">
 When the align attribute is used on a table, text should flow around it (rather
like it can flow around an image). For example, here is a left-aligned table that
is followed by some text
Basic Table Elements and Attributes
 Basic Table Elements and Attributes
The bgcolor Attribute (Deprecated)
The bgcolor attribute sets the background color for the table. The value
of this attribute should either be a color name or a six-digit code known
as a hex code.
 (The bgcolor attribute has been replaced by the background-color
property in CSS.)
 The syntax is as follows:
 bgcolor="red"
Basic Table Elements and Attributes
The cellpadding Attribute
 The cellpadding attribute is used to create a gap between the edges of a
cell and its contents.
 The value for this attribute determines the amount of space or padding
inside each wall of the cell, specified either in pixels or as a percentage
value (where the percentage is a percentage of the width of each cell).
 cellpadding="5" or cellpadding="2%"
 Basic Table Elements and Attributes
The cellspacing Attribute
 The cellspacing attribute is used to create a space between the borders
of each cell.
 The value for this attribute can be either the amount of space you
want to create between the cells, in pixels, or a percentage value.
 cellspacing="6“ or cellspacing="2%“
 This attribute has been replaced by the margin property in CSS.
Basic Table Elements and Attributes
The summary Attribute
 The summary attribute is supposed to provide a summary of the
table’s purpose and structure for non-visual browsers such as speech
browsers or Braille browsers.
 summary="Table shows the operating profit for the last four
quarters. The first column indicates the quarter, the second
indicates outgoings, the third indicates receipts, and the fourth
indicates profit."
The <tr> Element Contains Table Rows
 The <tr> element is used to contain each row in a table. Anything
appearing within a <tr> element should appear on the same row.
 It can carry five attributes, three of which have been deprecated in
favor of using CSS.
The char Attribute
 If the align attribute has been given a value of char, then the char
attribute is used to specify that the contents of each cell within the
row will be aligned around the first instance of a particular character
known as an axis character
 The <tr> Element Contains Table Rows
 The syntax is as follows:
char=".
The bgcolor Attribute
 The bgcolor attribute sets the background color for the row. The
value of this attribute should be either a color name or a hex code or
color value,
 bgcolor="red"
 The bgcolor attribute is commonly used on the <tr> element to shade
alternate rows of a table with different colors, thus making it easier to
read across each row
The <td> and <th> Elements Represent Table Cells
 Every cell in a table will be represented by either a <td> element for
cells containing table data or a <th> element for cells containing
table headings.
 By default, the contents of a <th> element are usually displayed in a
bold font, horizontally aligned in the center of the cell.
 The content of a <td> element, meanwhile, will usually be displayed
left-aligned and not in bold.
 The <td> and <th> elements can both carry the same set of
attributes, and the attribute only applies to that one cell carrying it.
 The <td> and <th> Elements Represent Table Cells

 the <td> and <th> elements can also carry the following attributes:
 abbr align axis bgcolor char charoff colspan headers
 height nowrap rowspan scope valign width
 The abbr Attribute
The abbr Attribute
 The abbr attribute is used to provide an abbreviated version of the cell’s
content.
 abbr="description of services"
 The <td> and <th> Elements Represent Table Cells
The align Attribute
 The align attribute sets the horizontal alignment for the content of the cell.
align="alignment“
The possible values for the align attribute are left, right, center, justify, and
char, each of which was described earlier in “The < tr >
The colspan Attribute
 The colspan attribute is used when a cell should span across more than one
column.
 The value of the attribute specifies how many columns of the table a cell
will span across
colspan="2"
 The <td> and <th> Elements Represent Table Cells
The rowspan Attribute
 The rowspan attribute specifies the number of rows of the table a cell
will span across, the value of the attribute being the number of rows the
cell stretches across.
rowspan="2“
 Adding a <caption> to a Table
 Even if the surrounding text describes the content of the table, it is
good practice to give the table a formal caption using the <caption>
element.
 By default, most browsers will display the contents of this element
centered above the table,
 The <caption> element appears directly after the opening <table> tag;
it should come before the first row.
 <table>
<caption> Opening hours for the Example Cafe</caption>
<tr>
 Grouping Sections of a Table
 some techniques that allow you to group together cells, rows, and
columns of a table, and learn the advantages that doing this can bring.
 In particular, you will see how to do the following:
 Use the rowspan and colspan attributes to make cells stretch over more
than one row or column.
 Split a table into three sections: a head, body, and foot
 Group columns using the <colgroup> element
 Grouping Sections of a Table

Spanning Columns Using the colspan Attribute

 As you saw when looking at the <td> and <th> elements, both can
carry an attribute called colspan that allows the table cell to span (or
stretch) across more than one column
 Spanning Rows Using the rowspan Attribute
 The rowspan attribute does much the same thing as the colspan
attribute, but it works in the opposite direction: it allows cells to
stretch vertically across cells
 Splitting Up Tables Using a Head, Body, and Foot
 There are occasions when you may wish to distinguish between the body
of a table (where most of the data is held) and the headings or maybe
even the footers.
 If the table is too long to show on a screen, then the header and footer
might remain in view all the time, while the body of the table gains a
scrollbar.
 The three elements for separating the head, body, and foot of a table are:
 <thead> to create a separate table header
 <tbody> to indicate the main body of the table
 <tfoot> to create a separate table footer
 A table may also contain several <tbody> elements to indicate different
“pages,” or groups of data.
Splitting Up Tables Using a Head, Body, and Foot
Splitting Up Tables Using a Head, Body, and Foot
Grouping Columns Using the <colgroup> Element

 If two or more columns are related, you can use the <colgroup>
element to explain that those columns are grouped together.
 The first four columns are in the first column group, and the next
two columns are in the second column group.
Grouping Columns Using the <colgroup>
Element
 When the <colgroup> element is used, it comes directly after the
opening <table> tag and carries a span attribute, which is used to
indicate how many columns the group contains.
 The class attribute is used to attach CSS rules that tell the browser
the width of each column in the group and the background color for
each cell.
 Grouping Columns Using the <colgroup> Element

Nested Tables
 you can even place another entire table inside a table cell, creating
what’s called a nested table.