170 likes | 272 Views
Lecture 10 Web Programming. Introducing Web Tables. Tabulating items. Adv. of Tables: Better readability More flexibility More efficient to explain information than plain text. Another snapshot of HTML Table. Helps us to layout the html page in a nice format.
E N D
Tabulating items • Adv. of Tables: • Better readability • More flexibility • More efficient to explain information than plain text
Another snapshot of HTML Table Helps us to layout the html page in a nice format
How to create HTML Tables? • What are the questions we need to ask ourselves? • What is the tag for that? • <table>…</table> • A Table must have rows and each of the rows must be divided into cells • add a row • <tr>…</tr> • add a cell (column) • <td>…</td> • That’s it! Let’s build a simple table then…with 2 rows and 2 cells in each row
Code to create HTML Table <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> row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2 row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2 Sometimes, this looks nice. But sometime, you may need the actual lines
Actual lines = border (attribute) How can I add borders? <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> Width of the borders row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2
Simple Exercise #1 • Let’s build a simple table with 3 rows and 2 cols.
How about headings in this table? <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> Heading 1 Heading 2 row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2 Tag for heading?? <th> … </th> cell content is made bold and centered
More design of tables • 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 multiple columns • rowspan: allows a cell span multiple rows
How to create column span? • COLSPAN: allows a cell span multiple columns • example <table border=“1”> <tr> <td colspan=“2”> fruits </td> </tr> <tr> <td> apple </td> <td> orange </td> </tr> </table> <th </th>
ROWSPAN • ROWSPAN: allows a cell span multiple rows • example <table border=“1”> <tr> <th rowspan=“2”> contact </th> <td> phone </td> </tr> <tr> <td> fax </td> </tr> </table>
Creating a Table caption Caption is a part of Table describing the content of the table in a line 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 you want to display in the webpage
Caption code • <caption> … </caption> • example <table border=“1”> <caption> My contact info </caption> <tr> <th rowspan=“2”> contact </th> <td> phone </td> </tr> <tr> <td> fax </td> </tr> </table>
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 be top / bottom / left / right
Hands-on Practice #2 All times listed in central time