Introducing Web Tables
Introducing Web Tables
Tables for tabulating items
Better looking More flexibility More efficient to explain information than plain text
A snapshot of HTML Table
Each table in a Web page follows a basic structure consisting of the table element and a collection of table rows nested in the table element
What are the questions we need to ask ourselves?
What is the tag for creating table element?<table> ...</table>
What else? A Table must have rows and each of the rows
must be divided into cells
How to create HTML Tables?
How to add rows?
<table><tr>
table cells</tr><tr>
table cells</tr>...
</table>
How to create HTML Tables?
Table Cells Table headings, the
cells that identify the header contents marked using a <th> tag
Data cells marked with the <td>
tag and are used for any content that is not considered a heading
That’s it! Let’s build a simple table then…
With 2 rows and 2 cells in each row
How to create HTML Tables?
<table><tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td></tr><tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td></tr>
</table>
Code to create HTML Table
row 1, cell 1
row 2, cell 2row 2, cell 1
row 1, cell 2
row 1, cell 1
row 2, cell 2row 2, cell 1
row 1, cell 2
Sometimes, this looks nice. But sometime, you may need the actual lines
<table border=“1”><tr><td>row 1, cell 1</td><td>row 1, cell 2</td></tr><tr><td>row 2, cell 1</td><td>row 2, cell 2</td></tr>
</table>
Actual lines = border (attribute)
row 1, cell 1
row 2, cell 2row 2, cell 1
row 1, cell 2
How can I add borders?
Width of the borders
10
How about headings in a tables?
row 1, cell 1
row 2, cell 2row 2, cell 1
row 1, cell 2
Heading 1 Heading 2
<table border=“1”> <tr>
<th>Heading 1</th>
<th>Heading 2</th></tr><tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td></tr><tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td></tr>
</table>
Tag for heading??
<th> … </th>
cell content is made bold and centered
11
Spanning rows and columns A spanning cell is a single cell that occupies more
than one row or one column in the table
Attributes COLSPAN: allows a cell span two columns ROWSPAN: allows a cell span two rows
More design of tables
fruits
apple orange
ContactPhone
Fax
12
COLSPAN: allows a cell span two columns
example <table border=“1”>
<tr>
<td colspan=“2”> fruits </td>
</tr>
<tr>
<td> apple </td>
<td> orange </td>
</tr>
</table>
Attributes for cell tags
fruits
apple orange
fruits
apple orange
13
ROWSPAN: allows a cell span two rows
example <table border=“1”>
<tr>
<th rowspan=“2”> contact </th>
<td> phone </td>
</tr>
<tr>
<td> fax </td>
</tr>
</table>
Attributes for cell tags (contd.)
Practice Exercise Write html code for this table
14
Creating a Table caption Caption is a part of Table describing the
content of the table in a line
15
Creating a Table Caption
To create a table caption, add the caption element directly below the opening <table> tag with the syntax
<caption> content </caption>
where content is the content of the table caption
16
Positioning a Table Caption
By default, table captions are placed at the top
Change the placement using “align” attribute
<caption align =“position”> content </caption>
where position can betop / bottom / left / right
17
Formatting the appearance of HTML Tables…
18
Formatting Table appearance
Cell padding space between the cell contents and the cell
border
19
Cellpadding
To define the padding within table cells, add the attribute
<table cellpadding="value"> ... </table>
to the table element, where value is the size of the padding space in pixels
20
Formatting Table appearance (contd.)
Cell spacing The amount of space between table cells is
known as the cell spacing
21
Cellspacing
To define the space between table cells, add the attribute
<table cellspacing="value"> ... </table>
to the table element, where value is the space between table cells in pixels
22
Width and Height of Table
To set the width of the table to a specific value, add the width attribute
<table width="value"> ... </table>
Many browsers also support the height attribute
<table height="value"> ... </table>
23
Formatting Table Borders with HTML Attributes
A table frame specifies which sides of the table (or which sides of the table cells) will have borders
<table border ="value" frame ="type"> ... </table>
24
Formatting Table Borders (contd.)
25
Formatting internal gridlines
A table rule specifies how the internal gridlines are drawn within the table
<table border ="value" rules ="type"> ... </table>
26
Practice Exercise #2 Rest of the table
27
Formatting Tables with HTML Attributes By default, browsers horizontally center the
contents of table header cells and left-align the contents of table data cells
To control the horizontal alignmentalign="position“
To control the vertical alignmentvalign="position“
position = top / middle / bottom
28