introducing web tables. tables for tabulating items better looking more flexibility more...
TRANSCRIPT
![Page 1: Introducing Web Tables. Tables for tabulating items Better looking More flexibility More efficient to explain information than plain text](https://reader035.vdocument.in/reader035/viewer/2022062519/56649f075503460f94c1c9c3/html5/thumbnails/1.jpg)
Introducing Web Tables
![Page 2: Introducing Web Tables. Tables for tabulating items Better looking More flexibility More efficient to explain information than plain text](https://reader035.vdocument.in/reader035/viewer/2022062519/56649f075503460f94c1c9c3/html5/thumbnails/2.jpg)
Tables for tabulating items
Better looking More flexibility More efficient to explain information than plain text
![Page 3: Introducing Web Tables. Tables for tabulating items Better looking More flexibility More efficient to explain information than plain text](https://reader035.vdocument.in/reader035/viewer/2022062519/56649f075503460f94c1c9c3/html5/thumbnails/3.jpg)
A snapshot of HTML Table
![Page 4: Introducing Web Tables. Tables for tabulating items Better looking More flexibility More efficient to explain information than plain text](https://reader035.vdocument.in/reader035/viewer/2022062519/56649f075503460f94c1c9c3/html5/thumbnails/4.jpg)
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?
![Page 5: Introducing Web Tables. Tables for tabulating items Better looking More flexibility More efficient to explain information than plain text](https://reader035.vdocument.in/reader035/viewer/2022062519/56649f075503460f94c1c9c3/html5/thumbnails/5.jpg)
How to add rows?
<table><tr>
table cells</tr><tr>
table cells</tr>...
</table>
How to create HTML Tables?
![Page 6: Introducing Web Tables. Tables for tabulating items Better looking More flexibility More efficient to explain information than plain text](https://reader035.vdocument.in/reader035/viewer/2022062519/56649f075503460f94c1c9c3/html5/thumbnails/6.jpg)
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
![Page 7: Introducing Web Tables. Tables for tabulating items Better looking More flexibility More efficient to explain information than plain text](https://reader035.vdocument.in/reader035/viewer/2022062519/56649f075503460f94c1c9c3/html5/thumbnails/7.jpg)
That’s it! Let’s build a simple table then…
With 2 rows and 2 cells in each row
How to create HTML Tables?
![Page 8: Introducing Web Tables. Tables for tabulating items Better looking More flexibility More efficient to explain information than plain text](https://reader035.vdocument.in/reader035/viewer/2022062519/56649f075503460f94c1c9c3/html5/thumbnails/8.jpg)
<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
![Page 9: Introducing Web Tables. Tables for tabulating items Better looking More flexibility More efficient to explain information than plain text](https://reader035.vdocument.in/reader035/viewer/2022062519/56649f075503460f94c1c9c3/html5/thumbnails/9.jpg)
<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
![Page 10: Introducing Web Tables. Tables for tabulating items Better looking More flexibility More efficient to explain information than plain text](https://reader035.vdocument.in/reader035/viewer/2022062519/56649f075503460f94c1c9c3/html5/thumbnails/10.jpg)
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
![Page 11: Introducing Web Tables. Tables for tabulating items Better looking More flexibility More efficient to explain information than plain text](https://reader035.vdocument.in/reader035/viewer/2022062519/56649f075503460f94c1c9c3/html5/thumbnails/11.jpg)
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
![Page 12: Introducing Web Tables. Tables for tabulating items Better looking More flexibility More efficient to explain information than plain text](https://reader035.vdocument.in/reader035/viewer/2022062519/56649f075503460f94c1c9c3/html5/thumbnails/12.jpg)
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
![Page 13: Introducing Web Tables. Tables for tabulating items Better looking More flexibility More efficient to explain information than plain text](https://reader035.vdocument.in/reader035/viewer/2022062519/56649f075503460f94c1c9c3/html5/thumbnails/13.jpg)
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.)
![Page 14: Introducing Web Tables. Tables for tabulating items Better looking More flexibility More efficient to explain information than plain text](https://reader035.vdocument.in/reader035/viewer/2022062519/56649f075503460f94c1c9c3/html5/thumbnails/14.jpg)
Practice Exercise Write html code for this table
14
![Page 15: Introducing Web Tables. Tables for tabulating items Better looking More flexibility More efficient to explain information than plain text](https://reader035.vdocument.in/reader035/viewer/2022062519/56649f075503460f94c1c9c3/html5/thumbnails/15.jpg)
Creating a Table caption Caption is a part of Table describing the
content of the table in a line
15
![Page 16: Introducing Web Tables. Tables for tabulating items Better looking More flexibility More efficient to explain information than plain text](https://reader035.vdocument.in/reader035/viewer/2022062519/56649f075503460f94c1c9c3/html5/thumbnails/16.jpg)
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
![Page 17: Introducing Web Tables. Tables for tabulating items Better looking More flexibility More efficient to explain information than plain text](https://reader035.vdocument.in/reader035/viewer/2022062519/56649f075503460f94c1c9c3/html5/thumbnails/17.jpg)
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
![Page 18: Introducing Web Tables. Tables for tabulating items Better looking More flexibility More efficient to explain information than plain text](https://reader035.vdocument.in/reader035/viewer/2022062519/56649f075503460f94c1c9c3/html5/thumbnails/18.jpg)
Formatting the appearance of HTML Tables…
18
![Page 19: Introducing Web Tables. Tables for tabulating items Better looking More flexibility More efficient to explain information than plain text](https://reader035.vdocument.in/reader035/viewer/2022062519/56649f075503460f94c1c9c3/html5/thumbnails/19.jpg)
Formatting Table appearance
Cell padding space between the cell contents and the cell
border
19
![Page 20: Introducing Web Tables. Tables for tabulating items Better looking More flexibility More efficient to explain information than plain text](https://reader035.vdocument.in/reader035/viewer/2022062519/56649f075503460f94c1c9c3/html5/thumbnails/20.jpg)
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
![Page 21: Introducing Web Tables. Tables for tabulating items Better looking More flexibility More efficient to explain information than plain text](https://reader035.vdocument.in/reader035/viewer/2022062519/56649f075503460f94c1c9c3/html5/thumbnails/21.jpg)
Formatting Table appearance (contd.)
Cell spacing The amount of space between table cells is
known as the cell spacing
21
![Page 22: Introducing Web Tables. Tables for tabulating items Better looking More flexibility More efficient to explain information than plain text](https://reader035.vdocument.in/reader035/viewer/2022062519/56649f075503460f94c1c9c3/html5/thumbnails/22.jpg)
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
![Page 23: Introducing Web Tables. Tables for tabulating items Better looking More flexibility More efficient to explain information than plain text](https://reader035.vdocument.in/reader035/viewer/2022062519/56649f075503460f94c1c9c3/html5/thumbnails/23.jpg)
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
![Page 24: Introducing Web Tables. Tables for tabulating items Better looking More flexibility More efficient to explain information than plain text](https://reader035.vdocument.in/reader035/viewer/2022062519/56649f075503460f94c1c9c3/html5/thumbnails/24.jpg)
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
![Page 25: Introducing Web Tables. Tables for tabulating items Better looking More flexibility More efficient to explain information than plain text](https://reader035.vdocument.in/reader035/viewer/2022062519/56649f075503460f94c1c9c3/html5/thumbnails/25.jpg)
Formatting Table Borders (contd.)
25
![Page 26: Introducing Web Tables. Tables for tabulating items Better looking More flexibility More efficient to explain information than plain text](https://reader035.vdocument.in/reader035/viewer/2022062519/56649f075503460f94c1c9c3/html5/thumbnails/26.jpg)
Formatting internal gridlines
A table rule specifies how the internal gridlines are drawn within the table
<table border ="value" rules ="type"> ... </table>
26
![Page 27: Introducing Web Tables. Tables for tabulating items Better looking More flexibility More efficient to explain information than plain text](https://reader035.vdocument.in/reader035/viewer/2022062519/56649f075503460f94c1c9c3/html5/thumbnails/27.jpg)
Practice Exercise #2 Rest of the table
27
![Page 28: Introducing Web Tables. Tables for tabulating items Better looking More flexibility More efficient to explain information than plain text](https://reader035.vdocument.in/reader035/viewer/2022062519/56649f075503460f94c1c9c3/html5/thumbnails/28.jpg)
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