Published on March 7, 2014
Topic 06 : HTML Tables Er. Pradip Kharbuja
Table Structure ▪ HTML elements can be used to describe tabular data ▪ The <table> element defines the start and end of the table ▪ The <tr> element defines the start and end of a row in the table ▪ The <td> element defines a table cell
Write the HTML Table Code
HTML Table Code
The colspan Attribute ▪ The colspan attribute merges two or more columns into one column.
The rowspan Attribute ▪ The rowspan attribute merges two or more rows into one row.
Write HTML Code
The <thead>,<tfoot> & <tbody> Elements ▪ We can specify rows as being part of the table header, the table body or the table footer. ▪ The <thead>, <tfoot> and <tbody> allow us to add extra meaning to the table contents.
The <thead>,<tfoot> & <tbody> Elements ▪ The <tfoot> element should be added before the <tbody>. ▪ Tables are perfectly valid without the use of these elements, so for the simplicity, they are often ommited.
Accessible Tables ▪ Screen readers linearize tables. – Read out the contents in order – From left to right, top to bottom ▪ In this example, the screen reader would read – S.N., Item, Price, Qty, Amount, 1, Book, 200, 5, 1000
Accessible Tables ▪ There are a number of HTML features which can be used to enhance the accessibility of tables. 1. The summary attribute 2. The <caption> element 3. The <th> element
The summary attribute ▪ The summary attribute can be read out by screen readers. ▪ It should describe the structure of the table, which can help the user make sense of the table data when it is linearised.
The <caption> Element ▪ The caption element provides a title for the table.
The <th> Element ▪ The <th> element specifies that the cell contains table header information. – Distinguishes the headers from data ▪ <th> elements are usually displayed in bold and center.
Table and CSS
Table and CSS
Table and CSS ▪ The border-collapse property is specific to tables. – Specifies if the cell borders are merged – The default value is separate.
Table and CSS
Highlighting Specific Cells ▪ We can style individual cells, rows and columns using class and id attributes. – The <col> and <colgroup> elements allow us to target columns.
The <colgroup> and <col> Elements ▪ The <col> and <colgroup> elements allow us to describe specific columns.
Using Tables for Page Layout ▪ Before widespread browser support for CSS, tables were often used for page layout. ▪ With borders not visible, the table acts as a grid setting out the page contents. ▪ The following slide is a screen shot of the Amazon website from August 2004. ▪ Tables are used to design the page. ▪ Amazon now have a CSS driven design.
Using Tables for Page Layout http://www.amazon.com/ Amazon - August 2004
Using Tables for Page Layout ▪ The red lines show the table borders. – Complex tables – Tables inside tables - nested tables http://www.amazon.com/
Tables and Mobile Devices ▪ Tables do not work well on small screen sizes. – User has to scroll horizontally to view contents ▪ Displaying complex tables can be computationally intensive. – Mobile devices have limited processing power
End of Topic 6 Topic 6 : HTML Tables
Topic 06 C Hash Functions UHMICSAlgorithms. Subscribe Subscribed Unsubscribe 1,212 1K. Loading ... Topic 06 A Hash Tables Chaining - Duration: 8:21.
Topic 06 D Open Addressing UHMICSAlgorithms. Subscribe Subscribed Unsubscribe 1,207 1K. ... Topic 06 A Hash Tables Chaining - Duration: 8:21.
The following describes behaviour present in 220.127.116.11 and later. Text tables may be disconnected from their underlying data source, i.e. the text file.
Tutorials for beginners about how to code tables using HTML; includes table backgrounds, ... HTML Table Tutorials ... an advanced topic and part of the ...
TOPIC-Herausgeber: Ulrich Skambraks (verantwortlich) Verlag und Redaktion: Postfach 101544, D-57206 Kreuztal, Telefon 02732/791859, FAX 02732/74677
This is a list of ideas for Table Topics ... net/TableTopics.html. Famous Composers Edit. The Table Topics Master used ... Table Topic at our club ...
06.02.2016 - Samstag. Start: nach Vereinbarung _____ Warhammer Fantasy - Wald-, Hoch- und Dunkelelfen, Oger, Echsenmenschen | Wrath ...
ASSIGNMENT CLASSIFICATION TABLE (BY TOPIC) Topics Questions Brief Exercises Exercises Problems 1. ... Total Estimated Liability $ 12,320.06. 6-68 PROBLEM 6-14
Tableless web design (or tableless web layout) is a web design philosophy eschewing the use of HTML tables for page layout control purposes.  Instead of ...
Export Excel Data to HTML Tables. ... WCAG 2.0 Guideline 2.4.6—"Headings and labels describe topic or purpose." WCAG 2.0 Guideline 1.3.1 – "Information