Building the User Interface by Using HTML5: Organization ... - server

More documents

Recommendations

Info

64 | Lesson 3 Figure 3-10 An HTML document that includes article and aside elements LICENSED PRODUCT NOT FOR RESALE Aside Using Tags to Create Tables and Lists Tables and lists give structure to specific information in HTML documents. A table contains rows and columns, and displays data in a grid. In HTML, you can create ordered and unordered lists. Each item in an ordered list is marked by a number or letter. An unordered list is a bulleted list. This section focuses on how to create tables and lists using HTML elements. HTML5 introduces some new elements for both tables and lists, but most of the tags and concepts are the same as previous specifications. If you’ve ever created an HTML table or list, you should be able to breeze through this section. CERTIFICATION READY How do you create a table? 2.4 CREATING TABLES An HTML table contains rows and columns, and is used to organize and display information in a grid format. Some developers use tables for layout purposes, such as to position or align content with images, but that’s not the best use for tables. Regarding markup, every HTML table begins with the tag. Rows are marked by the tag, column headers use the tag, and cells are defined by the tag. The markup for a very basic two-column, five-row table is as follows. Comments have been added to indicate columns and rows, which are informational only and don’t appear when the document is viewed in a browser, is shown in Figure 3-11: Quarter Total Sales Q1 $4,349
Building the User Interface by Using HTML5: Organization, Input, and Validation | 65 Q2 $2,984 Q3 $3,570 Q4 $7,215 LICENSED PRODUCT NOT FOR RESALE Figure 3-11 A simple table TAKE NOTE * You must include the thead and tfoot elements before the tbody element so the browser can render the table header and footer before receiving all of the rows of data. Building on a simple table, you can use the tag to add a caption above or below the table. To apply inline styles using HTML rather than CSS, use the tag to apply styles to an entire column. (You’ll learn about inline formatting shortly.) The tag groups columns within a table so you can apply formatting to the group rather than just a column. When creating a long table that requires scrolling within a browser, use the , , and tags. The content within the table header and footer will remain on the page while the content marked by will scroll between them. The tag creates column headings (bolded by default), and the tag is used to display the last row, such as a totals row. The tag defines all of the content between the header and footer. The following is an example of the markup for a table with three columns and five rows, the first row being the column headings and the last row the table foot. The markup also includes a caption above the table. The markup is shown rendered by a browser in Figure 3-12: Sales for Employee ID 2387
Page 1 and 2: Building the User Interface by Usin
Page 11: Building the User Interface by Usin

Building the User Interface by Using HTML5: Organization ... - server

You also want an ePaper? Increase the reach of your titles

Delete template?

Save as template?