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?...  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 cells table cells... How to create HTML Tables?

Table Cells  Table headings, the cells that identify the header contents  marked using a tag  Data cells  marked with the 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?

row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2 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

row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2 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 1Heading 2 Heading 1 Heading 2 row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2 Tag for heading?? … 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 appleorange Contact Phone Fax

12  COLSPAN: allows a cell span two columns  example fruits apple orange Attributes for cell tags fruits appleorange fruits appleorange

13  ROWSPAN: allows a cell span two rows  example contact phone fax 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 tag with the syntax content 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 content where position can be top / 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... 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... 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...  Many browsers also support the height attribute... 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... 24

Formatting Table Borders (contd.) 25

Formatting internal gridlines  A table rule specifies how the internal gridlines are drawn within the 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 alignment align="position“  To control the vertical alignment valign="position“  position = top / middle / bottom 28