1 / 21

Tutorial 7 Creating Tables

Tutorial 7 Creating Tables. Objectives. Discern the difference between data tables and layout tables Create a table to display and organize data Merge table columns or rows Understand how to plan and use layout tables Create a table for layout. Objectives.

celerina-andeana
Download Presentation

Tutorial 7 Creating Tables

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. Tutorial 7Creating Tables

  2. Objectives • Discern the difference between data tables and layout tables • Create a table to display and organize data • Merge table columns or rows • Understand how to plan and use layout tables • Create a table for layout New Perspectives on Blended HTML, XHTML, and CSS

  3. Objectives • Learn how to nest a data table within a layout table • Create styles to change the appearance of a table • Position the cell contents vertically • Position a table horizontally New Perspectives on Blended HTML, XHTML, and CSS

  4. Understanding the Limitations of HTML Tables • Using HTML, you must enter the code for a table one row at a time and one cell at a time • To organize data, you create a data table, which is a table used to align text and numbers in columns and rows • To design pages, you can create a layout table, which is a table intended solely for page layout • When you place a table inside another table, you are creating a nested table New Perspectives on Blended HTML, XHTML, and CSS

  5. Creating a Table Border • To create a table border, enter the following code: <table border="pixelvalue"> where border is the border attribute and pixelvalue is the width of the border expressed in pixels. The higher the pixel value, the thicker the border New Perspectives on Blended HTML, XHTML, and CSS

  6. Entering the Title and Summary Attributes • To begin creating a table, enter the following code: <table title="tabletitle” summary="tablesummary"> </table> where table is the start table tag, title is the title attribute, tabletitle is a brief description of the table to be used as a ScreenTip, summary is the summary attribute, tablesummary is a detailed description of the table content, and </table> is the end table tag on a separate line New Perspectives on Blended HTML, XHTML, and CSS

  7. Creating a Table Caption • To create a table caption, enter the following code: <caption>captiontext</caption> where caption is the start caption tag, captiontext is the text in the caption, and </caption> is the end caption tag. If you want to position the caption below the table, insert the align attribute into the caption tag and assign the value of bottom New Perspectives on Blended HTML, XHTML, and CSS

  8. Creating Table Rows • To create table rows, enter the following code: <tr> <td>tabledata</td> </tr> where <tr> is the start table row tag, td is the start table data tag, tabledata is the data for the cell, </td> is the end table data tag, and </tr> is the end table row tag • Most HTML tables have one or more rows used for the column headers, which by default make the text in the header centered and bold • Use the optional table header tags, <th> and </th>, to create table headers New Perspectives on Blended HTML, XHTML, and CSS

  9. Spanning Cells Across Columns • To span a cell across columns, enter the following code: <td colspan="value"> where colspan is the colspan attribute and value is the number of columns that will be spanned. The colspan attribute and its value must be placed in the cell in which the colspan should begin. All empty spanned table data cells should be deleted New Perspectives on Blended HTML, XHTML, and CSS

  10. Merging Cells in Rows • To span a cell across rows, enter the following code: <td rowspan="value"> where rowspan is the rowspan attribute and value is the number of rows that will be spanned. The rowspan attribute and its value must be placed in the cell in which the rowspan should begin. All empty spanned table data cells should be deleted. If a row containing a rowspan is formatted, the row will include all the cells horizontally and the merged cells vertically New Perspectives on Blended HTML, XHTML, and CSS

  11. Merging Cells in Rows New Perspectives on Blended HTML, XHTML, and CSS

  12. Using Tables for Layout New Perspectives on Blended HTML, XHTML, and CSS

  13. Using Tables for Layout New Perspectives on Blended HTML, XHTML, and CSS

  14. Inserting Comments into the Table New Perspectives on Blended HTML, XHTML, and CSS

  15. Removing the Table Border • Now that the placeholder text has been replaced with actual data, you no longer need to display the nested data table border New Perspectives on Blended HTML, XHTML, and CSS

  16. Using CSS with Tables • Because the layout table occupies the entire body section, almost all styles you create for the table will supersede any styles you create for the body New Perspectives on Blended HTML, XHTML, and CSS

  17. Using CSS with Tables New Perspectives on Blended HTML, XHTML, and CSS

  18. Using CSS with Tables New Perspectives on Blended HTML, XHTML, and CSS

  19. Striping Rows • Many tables mimic the appearance of computer printout where each row has an alternating background color, making the rows easier to locate and read New Perspectives on Blended HTML, XHTML, and CSS

  20. Formatting Columns New Perspectives on Blended HTML, XHTML, and CSS

  21. Using CSS with Tables New Perspectives on Blended HTML, XHTML, and CSS

More Related