Learn the Importance of HTML5 Tables for Organizing Information
"Discover why tables in HTML5 are significant for structuring data in a tabular form. Explore the essential parts and tags used in building tables, along with understanding content alignment within table cells."
Download Presentation
Please find below an Image/Link to download the presentation.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author. If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.
You are allowed to download the files provided on this website for personal or commercial use, subject to the condition that they are used lawfully. All files are the property of their respective owners.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author.
E N D
Presentation Transcript
HTML5 tables Oscar Gabriel Camarena Martinez 09-08-2021 Taken from: Paul S. Wang, Dynamic Web Programming and HTML 5, CRC Press 2013. ISBN 978-1- 4398-7182-9
Why tables in HTML5 are important to learn? Useful for organizing information in tabular form. Careful presentation and patient experimentation -> Master. Visual layout
Example Person Age Chris 38 Dennis 45 Sarah 29 Karen 47 VS
Parts of a table in HTML5: rows, columns, cells, headings, lines separating cells, a caption, spacing within and among cells, vertical and horizontal alignments of cell contents.
Tags when building a table <table></table <th></th> tag defines a header cell in an HTML table <tr></tr>: stands for table row. <td></td>: stands for table data.
<table border="1"> <caption>My Contacts</caption> (1) <tbody> <tr> Building a table <tr> <td>Mary Jane</td> <th>Name</th> <td>mjane@hotmail.com</td> <td>123-555-3020</td> <th>email</th> <th>phone</th> </tr> (4) </tr> (2) </tbody> <tr> </table> <td>Joe Smith</td> <td>jsmith@gmail.com</td> <td>432-555-1000</td> </tr> (3)
Content Alignment in a Table Cell Default: content in a cell is left aligned horizontally and middle aligned vertically inside the space for the cell. Properties: text-align (horizontal alignment): Left, right, center, and justify vertical-align: top, middle, and bottom
How it was built <table border="1" style="background-color: #def; border-collapse: collapse"> <thead><tr><th></th> <th><code>text-align:left</code></th> <th><code>text-align:center</code></th> <th><code>text- align:right</code></th></tr></thead> <tbody><tr><th><code>vertical- align:<br/>top</code></th> (B) <td style="vertical-align:top">content</td> <td style="text-align:center; vertical-align:top">content</td> <td style="text-align:right; vertical-align:top">content</td></tr> <tr><th><code>vertical-align:<br/>middle</code></th> (C) <td>content</td> <td style="text- align:center">content</td> <td style="text-align:right">content</td></tr> <tr><th><code>vertical-align:<br/>bottom</code></th> (D) <td style="vertical-align:bottom">content</td> <td style="text-align:center; vertical-align:bottom">content</td> <td style="text-align:right; vertical-align:bottom">content</td> </tr></tbody></table>
Displaying Tables Cart example Cart example
Positioning Tables Table Layout Default: Layout algorithm where the width and height of a table are automatically computed to accommodate the contents in the table cells. The width value can be a length or a percentage (of the available width). Default: positioned left adjusted by itself on the page. Center: <table style="margin-left: auto; margin-right: auto">: It asks the browser to automatically compute equal left and right
Rules between Cells A simple way to get rules (lines) displayed to separate table cells is to use the border="1" attribute of the table element. You can get rules separating all cells.
Grouping Rows and Columns Table rows can be grouped b: thead tbody tfoot Row grouping allows you to specify styles for a group of rows all at once <table border="1" style="width:300px; border-collapse:collapse"> <colgroup> <col span="2" style="width:40%"/> (I) <col style="width:20%; background-color: #def"/> (II) </colgroup><tbody> <tr> <td>A</td><td>B</td><td >25.00</td></tr> <tr> <td>C</td><td>D</td><td >35.00</td></tr> <tr> <td>E</td><td>F</td><td >45.00</td></tr> </tbody></table>
Common use of tables Page Layout, but not recommended. Use style rules to create the layout grid Use <form></form>
Pagewide Style with body Style properties attached to the body element affect the presentation of the entire page. For example, <body style="color:navy; background-color: white"> Title abcde
Lets practice what we learn about HTML5 table Example taken from: https://www.w3schools.com/html/html_tables.asp Instructions: insert a column to include city. Maria is from Frankfurt. Francisco is from CDMX. Finally, insert the name of the company where you work, your name, country, and city.
Comments & Feedback Thank you!
Additional references: https://www.w3schools.com/tags/tag_table.asp https://www.w3schools.com/tags/tag_td.asp https://www.w3schools.com/tags/tag_th.asp https://www.w3schools.com/tags/tag_tr.asp
