1 / 9

Web Page Design

Web Page Design. Notes Ch. 12—Creating Tables. Why Use Tables?. Tables are used to create a variety of items such as calendars, charts, and spreadsheets. They are useful for organizing information on a Web page, and are often used instead of columns or tabs. Understanding Tables.

selia
Télécharger la présentation

Web Page Design

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Web Page Design Notes Ch. 12—Creating Tables

  2. Why Use Tables? • Tables are used to create a variety of items such as calendars, charts, and spreadsheets. • They are useful for organizing information on a Web page, and are often used instead of columns or tabs.

  3. Understanding Tables • A table consists of rows (go across) and columns (go up and down). Rows and columns intersect to form cells. • Three tags are used to create an HTML table. • <TABLE> Tells the browser where the table begins, also includes specifications such as table size and border width. • <TR> Defines a row of cells. • <TD> Indicates table data, and is used to specify a table cell. You do not need to specify the number of columns, just the number of cells in each row.

  4. Creating Tables • Specify where the table begins and ends <TABLE> and </TABLE> • Define the table row <TR> and </TR> (within the table tags) • Define the table cell and enter cell data <TD> and </TD> Key cell data between tags. • You must use the <TD> and </TD> tags for each cell in the row. You must use the <TR> and </TR> tags for each row in the table.

  5. Changing Table Borders • Table borders are specified using the BORDER=# attribute. • The number is the width of the border. • The attribute is placed inside the <TABLE> tag: <TABLE BORDER=5>

  6. Changing the Table Size • You can change the width (left to right) and height (top to bottom) of your table. You need to decide what percentage of the window’s width you want the table to occupy. For example, a table width of 50% would take up 50% (half) of the width of the document window. 100% would go across the whole window. • <TABLE BORDER=3 WIDTH=50%> • Changing the table size is similar to changing the border size. The height is changed with numbers instead of percentages. Default border is none (0). Each number increases the size of the border. • <TABLE BORDER=3 WIDTH=50% HEIGHT=100>

  7. Formatting Table Cells • You can align data in the table cell horizontally, vertically, or both. To align the text horizontally, use the ALIGN=XXX inside the <TD> tag. XXX can be left, center, or right. Default is left. • To align the text vertically, use the VALIGN=XXX inside the <TD> tag. XXX can be top, middle, or bottom. The default is middle. • The ALIGN AND VALIGN attributes must be inside the <TD> tag, just as BORDER, WIDTH, AND HEIGHT attributes are inside the <TABLE> tag.

  8. Cell Width • To give a cell a different width than the cell above it, you need to use the COLSPAN=# attribute. <TD COLSPAN=2> • You can span cells across rows by using the ROWSPAN=# attribute. <TD ROWSPAN=2>.

  9. The End!

More Related