web development -2

sri999

t6.pptx

Home >Information Systems homework help >web development -2

HTML5, CSS3, and JavaScript

6th Edition

Working with Tables and Columns

Tutorial 6

Carey

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Objectives

Explore the structure of a web table

Create table heading and data cells

Apply CSS styles to a table

Create cells that span multiple rows and columns

Add a caption to a table

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Objectives (continued)

Create row and column groups

Apply styles to row and column groups

Display page elements in table form

Create a multi-column layout

Structure of a Web Table

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Introducing Web Tables

Web table

HTML structure that consists of multiple table rows

Each table row contains one or more table cells

Effective tool for organizing and classifying web page content

Consists of a table element

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Marking Tables and Table Rows

A table element contains a collection of table rows marked using the tr (table row) element

A table contains cells within each row

Size of a table is defined by

number of table rows

number of cells within rows

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Marking Tables and Table Rows (continued 1)

General structure of a web table:

<table>

<tr>

table cells

</tr>

<tr>

table cells

</tr>

…

</table>

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Marking Tables and Table Rows (continued 2)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Marking Table Headings and Table Data

Web tables support two types of table cells

Header cells

Contains content placed at the top of a column or beginning of a row

By default, displays text in bold and centers text horizontally

Marked using the th element

Marking Table Headings and Table Data (continued 1)

Data cells

Contains content within columns or rows

By default, displays text as unformatted text and is aligned to the left within the cell

Marked using the td element

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Marking Table Headings and Table Data (continued 2)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Marking Table Headings and Table Data (continued 3)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Adding Table Borders with CSS

The CSS border property is used to add borders to any part of a web table

Borders need not be of the same style

Two style choices for borders

Separate borders

Collapsed borders

Adding Table Borders with CSS (continued 1)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Adding Table Borders with CSS (continued 2)

To choose between separate or collapsed borders model apply the following property to the table element:

border-collapse: type;

where type is either separate or collapse

The separate borders model sets the spacing between borders using

border-spacing: value

where value is in CSS units of measure

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Adding Table Borders with CSS (continued 3)

The collapsed borders model

Borders from adjacent elements are merged together to form a single border

Borders are joined to combine their features

Combining adjacent borders with different widths, styles, or colors is complicated

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Adding Table Borders with CSS (continued 4)

Five rules to reconcile the differences between adjacent borders

If either border has a style of hidden, the collapsed border is hidden

Border style of none is overridden by another border style

The style of wider border takes priority over the narrower border if neither border is hidden

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Adding Table Borders with CSS (continued 5)

Double borders have higher precedence followed by solid, dashed, ridge, outset, groove and inset

If borders differ only in color, precedence is given to borders

Precedence to borders in decreasing order

Borders around individual table cells

Borders for table rows

Borders for row groups

Borders for columns

Borders for column groups

Borders around the entire table

Adding Table Borders with CSS (continued 6)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Spanning Rows and Columns

Spanning cells

Single cell that occupies more than one cell row and/or column

Created by adding rowspan and/or colspan attributes to td or th elements

Spanning starts in the cell with rowspan or colspan attributes and covers the cells in the right and below the initial cell

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Spanning Rows and Columns (continued 1)

rowspan=“rows”

where rows is the number of rows that the cell occupies

colspan = “cols”

where cols is the number of columns that the cell occupies

Spanning Rows and Columns (continued 2)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Spanning Rows and Columns (continued 3)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Creating a Table Caption

Marked using the caption element

<caption>content</caption>

where content is the content contained within the caption

Listed immediately after the <table> tag

Only one caption is allowed per web table

Inherits the text styles associated with the table

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Creating a Table Caption (continued 1)

By default, captions are placed above the tables

To specify the location, use the caption-side property

caption-side: position;

where position is either top or bottom

Creating a Table Caption (continued 2)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Rows and Column Groups

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Creating Row Groups

Row groups contain specific table information

Allows to create different styles for groups of rows

HTML supports three row groups

Rows that belong to the table head

Marked using thead element

Rows that belong to the table footer

Marked using tfoot element

Rows that belong to the table body

Marked using tbody element

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Creating Row Groups (continued 1)

The general structure of a web table divided into row groups

<table>

<thead>table rows</thead>

<tfoot>table rows</tfoot>

<tbody>table rows</tbody>

</table>

Only one thead and tfoot element is allowed per table

Creating Row Groups (continued 2)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Creating Column Groups

Columns are determined implicitly based on the number of cells within the table rows

Columns are identified by the col element

To identify individual columns, use the id and/or class attributes

Creating Column Groups (continued 1)

Columns can be referred using the following colgroup element:

<table>

columns

</colgroup>

table rows

</table>

where columns are the individual columns defined within the group

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Creating Column Groups (continued 2)

Columns and column groups accept only CSS style properties to modify

column borders

background

width

visibility

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Creating Column Groups (continued 3)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Exploring CSS Styles and Web Tables

Levels of precedence in the table styles in decreasing order

Table cells

Rows

Row groups

Columns

Column groups

Table

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Working with Width and Height

By default, browsers attempt to fit more content in each column before wrapping the cell text

Extra space is divided equally among columns if the width of a table is larger than its individual columns

Column widths are set using the width property

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Working with Width and Height (continued 1)

The height of each row is based on the height of the tallest cell

A uniform row height is defined by applying the height style to table rows within each row group

The vertical-align property is used to move the cell text

Working with Width and Height (continued 2)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Applying Table Styles to Other Page Elements

Apply a table layout to other HTML elements using the CSS display property

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Applying Table Styles to Other Page Elements (continued)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Tables and Responsive Design

Tables do not scale well to mobile devices

Problems faced by users to view a table in a mobile device

Table is too small to read

Table does not fit the visual viewport

Table columns are too narrow to read the cell content

Tables and Responsive Design (continued 1)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Tables and Responsive Design (continued 2)

A new layout of table data for mobile screens is required

Several table columns are reduced to two:

One column containing all data labels

Second column containing data associated with each label

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Tables and Responsive Design (continued 3)

To create a responsive web table, add the text of data labels as attributes of all td elements in the table body

Store data labels using a data attribute

General format of a data attribute is

data-text=“value”

where text is the name of the data attribute and value is its value

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Tables and Responsive Design (continued 4)

Data attributes use names specific to the function it is used for

For example, the following code uses a data attribute named data-label to store the text of the labels associated with the data cell:

<td data-label=“Date”>April 2, 2017</td>

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Tables and Responsive Design (continued 5)

The result is a list of data cells that are aligned as block elements

Within each block element, the data label is followed by the data cell content

The goal is to transform table with multiple columns into two-column layout

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Tables and Responsive Design (continued 6)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Designing a Column Layout

Column layout enables display of content side-by-side in a page

Layouts that use float elements or flexboxes differ from column layout

Single element can flow from one column to the next

Flow of content adjusts to match the page width

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Setting the Number of Columns

Size of a column is set using the column-count property

column-count: value;

where value is the number of columns in the layout

Browser extensions are included to ensure cross-browser compatibility

Setting the Number of Columns (continued)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Defining Column Widths and Gaps

Columns are laid out evenly across the width of the parent element by default

To set the column width, use the column-width property

column-width: size;

where size is the minimum width of the column

Column width acts like the basis value for items in a flexbox

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Defining Column Widths and Gaps (continued 1)

The column-width and column-count properties are combined to form shorthand columns property

columns: width count;

The default gap between columns is 1em

To set a different gap size, use the column-gap property

column-gap: size;

where size is the width of the gap

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Defining Column Widths and Gaps (continued 2)

Another way to separate columns is with a graphic dividing line created using the column-rule property

column-rule: border;

where border defines the style of dividing line

The column-rule property can be broken into individual properties like column-rule-width, column-rule-style, and column-rule-color

Defining Column Widths and Gaps (continued 3)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Managing Column Breaks

The size of column orphans is controlled using the orphans property

orphans: value;

where value is the minimum number of lines stranded before a column break

The size of column widows is controlled using the widows property

widows: value;

where value is the minimum number of lines placed after a column break

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Managing Column Breaks (continued 1)

Other properties to define column breaks

break-before: type;

break-after: type;

where type is one of the following:

auto (browser automatically sets column break)

always (to always place a column break)

avoid (to avoid placing a column break)

Managing Column Breaks (continued 2)

To control placement of column breaks within an element, use the property

break-inside: type;

where type is either auto or avoid

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Managing Column Breaks (continued 3)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Spanning Cell Columns

To span cell columns, use the column-span property

column-span: span;

where span is either none to prevent spanning or all to enable the content to span across all the columns

Spanning Cell Columns (continued)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition