1 / 17

Lecture 10 Web Programming

This lecture focuses on the essentials of HTML tables, highlighting their advantages such as improved readability, flexibility, and efficiency in displaying information. Learn how to create and format tables using the `<table>`, `<tr>`, `<td>`, and `<th>` tags. Explore attributes like `colspan` and `rowspan` for creating complex layouts, and how to add captions for clarity. This hands-on session will guide you through practical exercises in building and customizing tables for effective data presentation on web pages.

aaron-higgins
Télécharger la présentation

Lecture 10 Web Programming

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Lecture 10Web Programming

  2. Introducing Web Tables

  3. Tabulating items • Adv. of Tables: • Better readability • More flexibility • More efficient to explain information than plain text

  4. Another snapshot of HTML Table Helps us to layout the html page in a nice format

  5. 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

  6. 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

  7. 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

  8. Simple Exercise #1 • Let’s build a simple table with 3 rows and 2 cols.

  9. 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

  10. 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

  11. 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>

  12. 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>

  13. 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

  14. 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>

  15. 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

  16. Hands-on Practice #1

  17. Hands-on Practice #2 All times listed in central time

More Related