Chapter 5 Working with Tables

Agenda Add a Table Assign a Table Border Adjust Cell Padding and Spacing Adjust Cell Width and Height Add Column Labels Create Newspaper-Style Columns Create Side Navigation Add a Table Caption Control which Borders to Display Adjust the Table Size Change Cell Alignment Extend Cells across Columns and Rows Create Column and Row Groups Add a Background Color to Cells Add a Background Color to a Table Insert an Image in a Cell Insert a Background Image Change Table Alignment Control Text Wrapping in Cells Nest a Table within a Table

Why Tables HTML tables enable you to effectively present large amounts of data in rows and columns. You can also use tables to organize the overall structure of a Web page. For example, you can create a two-column table that organizes a list of navigational links in one column and the main text and image content in another.

Tables properties

Add Table The tag defines an HTML table. An HTML table consists of the element and one or more,, and elements. The element defines a table row, the element defines a table header, and the element defines a table cell. A more complex HTML table may also include,,,,, and elements.

Example of Table Month Savings January $100

Table Attributes AttributeValueDescription align left center right Not supported in HTML5. Deprecated in HTML Specifies the alignment of a table according to surrounding text bgcolor rgb(x,x,x) #xxxxxx colorname Not supported in HTML5. Deprecated in HTML Specifies the background color for a table border 1 "" Specifies whether the table cells should have borders or not cellpaddingpixels Not supported in HTML5. Specifies the space between the cell wall and the cell content cellspacingpixelsNot supported in HTML5. Specifies the space between cells frame void above below hsides lhs rhs vsides box border Not supported in HTML5. Specifies which parts of the outside borders that should be visible rules none groups rows cols all Not supported in HTML5. Specifies which parts of the inside borders that should be visible summarytextNot supported in HTML5. Specifies a summary of the content of a table width pixels % Not supported in HTML5. Specifies the width of a table

Rows Attributes AttributeValueDescription align right left center justify char Not supported in HTML5. Aligns the content in a table row bgcolor rgb(x,x,x) #xxxxxx colorname Not supported in HTML5. Deprecated in HTML Specifies a background color for a table row charcharacter Not supported in HTML5. Aligns the content in a table row to a character charoffnumber Not supported in HTML5. Sets the number of characters the content will be aligned from the character specified by the char attribute valign top middle bottom baseline Not supported

Cells Attributes AttributeValueDescription align left right center justify char Aligns the content in a cell bgcolor rgb(x,x,x) #xxxxxx colorname Specifies the background color of a cell colspannumberSpecifies the number of columns a cell should span headersheader_idSpecifies one or more header cells a cell is related to height pixels % Sets the height of a cell nowrap Specifies that the content inside a cell should not wrap rowspannumberSets the number of rows a cell should span scope col colgroup row rowgroup Defines a way to associate header cells and data cells in a table valign top middle bottom baseline Vertical aligns the content in a cell width pixels % Specifies the width of a cell

Create Newspaper-Style Columns Within the and tags, type to start the first column of text. to create a basic table. You can optionally specify a WIDTH attribute to constrain a column’s width. Type your column text. Type at the end of the text. Repeat the previous steps to add more columns and text. The Web browser displays the text as columns on the page.

Create Side Navigation Start your table by typing and tags. Type, replacing ? With the pixel value or percentage value you want to assign for the navigation column. Type your navigation links. You can use the tag to put links on different lines. Type at the end of the link text. Type, replacing ? With the pixel value or percentage value you want to assign for the main content column. Type your main content. Type,, and then to close the table. When the table displays in a browser, the links appear to the left of the main content.

Add a Table Caption Add a new line directly below the tag. Type. To place the caption below the table, type ALIGN=”bottom” within the tag. Type the caption text. Type at the end of the caption text. The Web browser displays the caption above or below the table.

Extend Cells across Columns and Rows Click inside the tag for the cell you want to extend across columns. Type COLSPAN=”?”, replacing ? with the number of columns you want to span. The Web browser displays the cell spanning the designated number of columns. In this example, a heading column spans the top of the table.

Create Column Groups The tag specifies a group of one or more columns in a table for formatting. The tag is useful for applying styles to entire columns, instead of repeating the styles for each cell, for each row. Note: The tag must be a child of a element, after any elements and before any,,, and elements. Tip: To define different properties to a column within a, use the tag within the tag.

Example of COLGROUP ISBN Title Price My first HTML $53

Scope Attribute The scope attribute defines a way to associate header cells and data cells in a table. The scope attribute identifies whether a cell is a header for a column, row, or group of columns or rows. Example: ValueDescription colSpecifies that the cell is a header for a column rowSpecifies that the cell is a header for a row colgroupSpecifies that the cell is a header for a group of columns rowgroupSpecifies that the cell is a header for a group of rows

Example of Scope Month Savings 1 January $100 2 February $80

Control Text Wrapping in Cells Click inside the cell tag for the text you want to control and type NOWRAP. To specify where a line breaks, type. You can also use the tag to control line breaks in a cell. The Web browser displays the text without breaking the line.

Lab 5 Add a Table Assign a Table Border Adjust Cell Padding and Spacing Adjust Cell Width and Height Add Column Labels Create Newspaper-Style Columns Create Side Navigation Add a Table Caption Control which Borders to Display Adjust the Table Size Change Cell Alignment Extend Cells across Columns and Rows Create Column and Row Groups Add a Background Color to Cells Add a Background Color to a Table Insert an Image in a Cell Insert a Background Image Change Table Alignment Control Text Wrapping in Cells Nest a Table within a Table