Topic 06 : HTML Tables

25 %
75 %
Information about Topic 06 : HTML Tables

Published on March 7, 2014

Author: PradipKharbuja


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 Amazon - August 2004

Using Tables for Page Layout ▪ The red lines show the table borders. – Complex tables – Tables inside tables - nested tables

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

Add a comment

Related presentations

Related pages

Topic 06 C Hash Functions - YouTube

Topic 06 C Hash Functions UHMICSAlgorithms. Subscribe Subscribed Unsubscribe 1,212 1K. Loading ... Topic 06 A Hash Tables Chaining - Duration: 8:21.
Read more

Topic 06 D Open Addressing - YouTube

Topic 06 D Open Addressing UHMICSAlgorithms. Subscribe Subscribed Unsubscribe 1,207 1K. ... Topic 06 A Hash Tables Chaining - Duration: 8:21.
Read more

Chapter 6. Text Tables - version 1.8 - HSQLDB

The following describes behaviour present in and later. Text tables may be disconnected from their underlying data source, i.e. the text file.
Read more

HTML Table Tutorials: Introduction to Tables

Tutorials for beginners about how to code tables using HTML; includes table backgrounds, ... HTML Table Tutorials ... an advanced topic and part of the ...
Read more

TOPIC-Herausgeber: Ulrich Skambraks - TOPIC biblische ...

TOPIC-Herausgeber: Ulrich Skambraks (verantwortlich) Verlag und Redaktion: Postfach 101544, D-57206 Kreuztal, Telefon 02732/791859, FAX 02732/74677
Read more

Table Topics Ideas - Toastmasters International - Wikia

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

Bremer Tabletop Verein (BTV) - Thema anzeigen - 06.02.2016 ...

06.02.2016 - Samstag. Start: nach Vereinbarung _____ Warhammer Fantasy - Wald-, Hoch- und Dunkelelfen, Oger, Echsenmenschen | Wrath ...
Read more


ASSIGNMENT CLASSIFICATION TABLE (BY TOPIC) Topics Questions Brief Exercises Exercises Problems 1. ... Total Estimated Liability $ 12,320.06. 6-68 PROBLEM 6-14
Read more

Tableless web design - Wikipedia, the free encyclopedia

Tableless web design (or tableless web layout) is a web design philosophy eschewing the use of HTML tables for page layout control purposes. [1] Instead of ...
Read more

Accessibility at Penn State | Tables

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
Read more