XP Using HTML Tables 1 Defining a Table

XP Using HTML Tables 1 Defining a Table

XP Using HTML Tables 1 Defining a Table Structure XP The first step to creating a table is to specify the table structure: the number of rows and columns

the location of column headings the placement of a table caption Once the table structure is in place, you can start entering data into the table. 2 Using the

,

, and

Tags XP

Graphical tables are enclosed within a two-sided

tag that identifies the start and ending of the table structure. Each row of the table is indicated using a two-sided

(for table row). Within each table row, a two-sided

alignment indicates the caption placement a value of bottom centers the caption below the table a value of top or center centers the caption above the table a value of left or right place the caption above the table to the left or right

9 Table Captions XP Only Internet Explorer supports all caption values. Netscape supports only the top and bottom values. The

(for table data) tag indicates the presence of individual table cells. 3 The General Table Syntax

XP

First Cell Second Cell
Third Cell Fourth Cell

two rows

two columns 4 Columns within a Table XP HTML does not provide a tag for table columns. In the original HTML specifications, the number of columns is determined by how many cells are inserted within each row.

for example, if you have four

tags in each table row, that table has four columns Later versions of HTML provide increased support for controlling the appearance of table columns. 5 HTML Structure of a Table XP beginning of the

table structure table cells first row of six in the table You do not need to indent the

tags or place them on separate lines, but you may find it easier to interpret your code if you do so.

After the table structure is in place, youre ready to add the text for each cell. end of the table structure 6 Creating Headings with the

Tag XP

HTML provides the

tag for table headings. Text formatted with the

tag is centered within the cell and displayed in a boldface font. The

tag is most often used for column headings, but you can use it for any cell that you want to contain centered boldfaced text. 7 Adding Table Headings to the Table XP

Text in cells formatted with the

tag is bold and centered above each table column. table headings 8 Creating a Table Caption XP

HTML allows you to specify a caption for a table. The syntax for creating a caption is:

caption text tag works only with tables, the tag must be placed within the table structure. Captions are shown as normal text without special formatting. Captions can be formatted by embedding the caption text

within other HTML tags. for example, place the caption text within a pair of and tags causes the caption to display as bold and italic 10 Result of a Table Caption XP caption text caption will be

centered above the table 11 Modifying the Appearance of a Table XP You can modify the appearance of a table by adding: gridlines borders background color

HTML also provides tags and attributes to control the placement and size of a table. 12 Adding a Table Border XP By default, browsers display tables without table borders. A table border can be added using the border

attribute to the

tag. The syntax for creating a table border is:

value is the width of the border in pixels The size attribute is optional; if you dont specify a size, the browser creates a table border 1 pixel wide. 13 Tables with Different Borders Values XP This figure shows the effect on a tables border when the border size is varied.

14 Adding a 5-Pixel Border to a Table XP Only the outside border is affected by the border attribute; the internal gridlines are not affected.

15 Controlling Cell Spacing XP The cellspacing attribute controls the amount of space inserted between table cells. The syntax for specifying the cell space is:

value is the width of the interior borders in pixels the default cell spacing is 2 pixels

Cell spacing refers to the space between the cells. 16 Defining Cell Padding XP To control the space between the table text and the cell borders, add the cellpadding attribute to the table tag. The syntax for this attribute is:

value is the distance from the table text to the cell border, as measured in pixels

the default cell padding value is 1 pixel Cell padding refers to the space within the cells. 17 Tables with Different Cell Spacing Values XP different cell spacing values different cell padding values

18 Table Frames and Rules XP Two additional table attributes introduced in HTML 4.0 are the frames and rules attributes. With the frame and rule attributes you can control how borders and gridlines are applied to the table. The frames attribute allows you to determine which sides of the table will have borders.

The frame attribute syntax is:

type is either box (the default), above, below, hsides, vsides, lhs, rhs, or void 19 Values of the Frame Attribute XP 20 Effect of Different Frame Values

XP This figure shows the effect of each of the frame values on the table grid. 21 Creating Frames and Rules Continued XP The rules attribute lets you control how the table gridlines are drawn (not supported by Netscape)

The syntax of the rules attribute is:

type is either all, rows, cols, or none the effect of each of the rules attribute values on a table 22 Working with Table and Cell Size XP The size of a table is determined by text it contains in its cells. By default, HTML places text on a single line.

As you add text in a cell, the width of the column and table expands to the edge of the page. once the page edge is reached, the browser reduces the size of the remaining columns to keep the text to a single line You can insert line break, paragraph, or other tags within a cell. When the browser can no longer increase or decrease the size of the column and table it wraps the text to a second line. As more text is added, the height of the table expands to accommodate the additional text. But, you can manually define the size of the table and its cells. 23

Defining the Table Size XP The syntax for specifying the table size is:

size is the width and height of the table as measured in pixels or as a percentage of the display area To create a table whose height is equal to the entire height of the display area, enter the attribute height=100%. If you specify an absolute size for a table in pixels, its size remains constant, regardless of the browser or monitor settings used.

Remember that some monitors display Web pages at a resolution of 640 by 480 pixels. 24 Setting the Width of the Table to 500 Pixels XP 25 Defining Cell and Column Sizes

XP To set the width of an individual cell, add the width attribute to either the

or

tags. The syntax is: width=value value can be expressed in pixels or as a percentage of the table width width value of 30% displays a cell that is 30% of the total width of table. The height attribute can also be used in the

or

tags

to set the height of individual cells. The height attribute is expressed either in pixels or as a percentage of the height of the table. If you include more text than can be displayed within that height value you specify, the cell expands to display the additional text. 26 Defining Cell and Column Sizes XP Specifying a width for an individual cell does not guarantee that the cell will be that width when

displayed in the browser. the reason for this is that the cell is part of a column containing other cells. Set the width of all the cells in the column to the same value to ensure that the cells do not change in size. 27 Aligning a Table on the Web Page XP By default, a browser places a table on the left margin of a

Web page, with surrounding text placed above and below the table. To align a table with the surrounding text, use the align attribute as follows: align=alignment alignment equals left, right, or center left or right alignment places the table on the margin of the Web page and wraps surrounding text to the side center alignment places the table in the horizontal center of the page, but does not allow text to wrap around it The align attribute is similar to the align attribute used with the tag.

28 Results of a Right-Aligned Table XP 29 Aligning the Contents of a Table XP By default, cell text is placed in the middle of the cell,

aligned with the cells left edge. By using the align and valign attributes, you can specify the texts horizontal and vertical placement. To align the text for a single column, you must apply the align attribute to every cell in that column. 30 Values of the Align and Valign Attributes XP

31 Spanning Rows and Columns XP To merge several cells into one, you need to create a spanning cell. A spanning cell is a cell that occupies more than one row or column in a table. Spanning cells are created by inserting the rowspan and colspan attribute in a

or

tag. The syntax for these attributes is:

rowspan=value colspan=value value is the number of rows or columns that the cell spans in the table 32 Example of Spanning Cells This cell spans two columns and two rows XP

this cell spans three columns This cell spans three rows 33 A Table Structure with a Row-Spanning Cell

XP four table cells in the first row only three table cells are required for the second and third rows HTML code

resulting table 34 Adding Spanning Cells to a Table XP 35 Another Example of Spanning Cells XP

36 Another Example of Spanning Cells XP 37 Applying a Background Color XP

Table elements support the bgcolor attribute. To specify a background color for all of the cells in a table, all of the cells in a row, or for individual cells, by adding the bgcolor attribute to either the

,

,

, or

tags as follows:

color is either a color name or hexadecimal color value 38 Specifying Table, Row, and Cell Colors

Specifying Table, Row, and Cell Colors The bordercolor Attribute XP By default, table borders are displayed in two shades of gray that create a three-dimensional effect. The syntax for the bordercolor attribute is:

color is an HTML color name or hexadecimal color value

Internet Explorer and Netscape apply this attribute differently.

Netscape 41 Applying a Table Background

XP Add a background image to your tables using the background attribute. A background can be applied to the entire table or to a cell. parch.jpg

42 Designing a Page Layout with Tables

XP HTML tables are most often used to define the layout of an entire Web page. If you want to design a page that displays text in newspaper style columns, or separates the page into distinct sections, youll find tables an essential and useful tool. 43 Table Layout of a Web Page

XP 620 pixels 1) newspaper logo 120 pixels a sample table layout of a Web page. 2) list of links

500 pixels 3) articles 4) address and phone number 44 Using Nested Table XP Tables can be created within another table making the Web page easier to manage.

a sketch of a web page using nested tables 45 The Result of the Web Page using Nested Tables XP a sample web page using nested tables

46 An Example of the Contents XP 47 An Example of the Gargoyle Notes XP

48 Example from Class Web Site Sample Template based on Class Web Page http://maya.cs.depaul.edu/~classes/it130/html/index-template.html HTML code

Recently Viewed Presentations

  • MEF Resource Model: OAM Augmenting TAPI

    MEF Resource Model: OAM Augmenting TAPI

    Underpinning Photonic model. The ONF Photonic model is a model of media and channels. Media is essentially "omni-directional" with some uni-directional elements. In the ONF core, the model uses primarily ForwardingConstructs (FC). The FC. Is used to represent Enabled Constrained...
  • Where Does Color Come From? - Issaquah Connect

    Where Does Color Come From? - Issaquah Connect

    A Scientific Explanation for the question; Where does color really come from? Claim: Color comes from white light. Evidence: You can use prisms, water droplets (rainbow) or special glasses to split white light into the colors of the spectrum (RoyG....
  • The World

    The World

    It would be interesting to examine the classroom environment to see whether student-athletes are being treated differently, often inadvertently, by faculty or by other students" long term studies should be conducted to determine if such massive amounts of time spend...
  • Chapter 9 - Section 1 Temperature and Thermal Equilibrium

    Chapter 9 - Section 1 Temperature and Thermal Equilibrium

    The lowest outdoor temperature ever recorded on Earth was -128.6°F at the Soviet Vostok Station in Antarctica on July 21, 1983. What is this temperature on the Celsius and Kelvin scale? (53.67∘C, 326.8K) The highest temperature recorded on Earth was...
  • Managing Your Small Woodland: Energize Your Woodland Investment

    Managing Your Small Woodland: Energize Your Woodland Investment

    Managing Your Small Woodland: Energize Your Woodland Investment. Indiana Watershed Leadership Academy. Phil Cox and Larry Owen. May 20, 2015. This template can be used as a starter file for presenting training materials in a group setting.
  • Meeting the Needs of Diverse Learners

    Meeting the Needs of Diverse Learners

    Tundra & prairie biomes Hexagon & pentagon Causes of WWI & WWII Monet's & Van Gogh's brush techniques Rap & Poetry Othello & Hamlet Playing flute & trumpet Hint: It's easier to compare specific things like apples and potatoes, rather...
  • Civil Rights Training for School Nutrition Professionals Wisconsin

    Civil Rights Training for School Nutrition Professionals Wisconsin

    Federal Law Prohibits Discrimination on the Basis of These Protected Classes:. Color. National Origin . Age. Disability. Sex. Race. It is the policy of USDA to prohibit discrimination in all of its programs and activities on the basis of protected...
  • The Practice of Everyday Life - Rutgers University

    The Practice of Everyday Life - Rutgers University

    The Practice of Everyday Life Michel de Certeau Luce Giard Pierre Mayol ... culture is judged by its operations, not by the possession of products The ordinary - making do (faire-avec) The Practice of Everyday Life Review by Beryl Lenger...