Scribd
Upload
8 views13 pages

Chapter 8 (Table Markup)

Uploaded by

jumagulnijat766
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
8 views13 pages

Chapter 8 (Table Markup)

Uploaded by

jumagulnijat766
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 13

1

Table Markup
Content 2

1 How table are used 4 Row and column groups

2 Basic table structure 5 Making tables accessible

3 Spanning rows and columns


How to Use Tables? 3

• HTML tables were created for instances when you


need to add tabular material to a web page.

• Tables may be used to organize schedules,


product comparisons, statistics, or other types of
information.

• A table cell may contain any sort of information,


including numbers, text elements, and even
images and multimedia objects.
How to Use Tables?... 4
Spanning Cells 5

• One fundamental feature of table structure is cell spanning, which is the stretching of a
cell to cover several rows or columns.

• Spanning cells allows you to create complex table structures.

• You make a header or data cell span by adding the colspan or rowspan attributes.
Spanning Cells 6

• One fundamental feature of table structure is cell spanning, which is the stretching of a
cell to cover several rows or columns.

• Spanning cells allows you to create complex table structures.

• You make a header or data cell span by adding the colspan or rowspan attributes.
Table Accessibility 7

• As a web designer, it is important that you always keep in mind how your site’s content
is going to be used by visitors with impaired sight.

• The caption element must be the first thing within the table element to describe table
content:
Table Accessibility… 8

• The scope and headers attributes allow authors to explicitly associate headers and
their respective content.

• Scope
• The scope attribute associates a table header with the row, column, group of rows
(such as tbody), or column group in which it appears by using the values row, col,
rowgroup, or colgroup, respectively.
Table Accessibility… 9

• headers
• The headers attribute is used in the td element to explicitly tie it to a header’s id value:
Row and Column Groups 10

• You can identify three groups of columns (one with headers, two with two columns
each), and three groupings of rows (headers, data, and a footnote).

• Conceptual table groupings like these are marked up with row group and column
group elements that provide additional semantic structure for styling or scripting.
Row and Column Groups 11

• Row Group Elements


Row and Column Group 12

• Column Group Elements


• You can semantically group columns (and assign id and class values) using the
colgroup element.

• Column groups are identified at the start of the table, just after the caption if there is
one, and they give the browser a little heads-up as to the column arrangement in the
table. The number of columns a colgroup represents is specified with the span
attribute.
Thank you

You might also like