1 / 21

Creating Tables

Creating Tables. Text Tables -created by using preformatted tags. Graphical Tables - created using Table Structure with HTML. Preformatted Tables. Type <PRE> to use the preformatted text tag. Enter the table text, aligning the columns of the table by inserting blank spaces as appropriate.

viveca
Download Presentation

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. Creating Tables • Text Tables -created by using preformatted tags. • Graphical Tables - created using Table Structure with HTML

  2. Preformatted Tables • Type <PRE> to use the preformatted text tag. • Enter the table text, aligning the columns of the table by inserting blank spaces as appropriate. • Type </PRE> to turn off the preformatted text tag.

  3. A Text Table This figure shows a text table.

  4. Graphical Tables • Enter the <TABLE> AND </TABLE> tags to identify the beginning and end of the table. • Enter <TR> and </TR> tags to identify the beginning and the end of each table row. • Enter <TD> and </TD> to identify the beginning and the end of each table cell. • Enter <TH> and </TH> to identify text that will act as table headers.

  5. A Graphical Table This figure shows a graphical table

  6. Simple Table Tags (2 x 2) <TABLE> <TR> <TD>first row, first cell</TD> <TD>first row, second cell</TD> </TR> <TR> <TD> second row, first cell</TD> <TD>second row, second cell</TD> </TR> </TABLE>

  7. Table Techniques • Start each table row on it’s own separate line. • Indent the table cell tags three or more spaces from the table row tags to make them easier to read. • Add blank spaces between table rows. • Generously add Comment tags.

  8. Inserting a Comment Tag • To insert a comment into a HTML file, enter the following tag: <!---comment text---> • Anything after the exclamation point is interpreted as a comment and is not displayed by the browser.

  9. Table Frames and Rules • The frames attribute allows you to determine which sides of the table will have borders. • The frame attribute syntax is: <table frame=“type”> • type is either “box” (the default), “above”, “below”, “hsides”, “vsides”, “lhs”, “rhs”, or “void”

  10. Effect of Different Frame Values • This figure shows the effect of each of the frame values on the table grid.

  11. Creating Frames and Rules Continued • The rules attribute lets you control how the table gridlines are drawn. • The syntax of the rules attribute is: <table rules=“type”> • type is either “all”, “rows”, “cols”, or “none”

  12. Effect of Different Rules Values Effect of Different Rules Values

  13. Changing a Table’s Appearance • Table Border: <TABLE BORDER=size> (size is in pixels) • Individual Table Cell Borders: <TABLE CELLSPACING=size> (default is 2 pixels) • The gap between the cell text and surrounding cell border: <TABLE CELLPADDING=size> (default is 1 pixel)

  14. Aligning a Table on the Page • Left aligned, wrapping text to the right: <TABLE ALIGN=LEFT> • Right aligned, wrapping text to the left: <TABLE ALIGN=RIGHT> • Center on the page: • Best Practice is to use CSS styles

  15. Row Groups • The <thead> tag is used to group the header content in an HTML table. • The thead element should be used in conjunction with the tbody and tfoot elements. • The tbody element is used to group the body content in an HTML table and the tfoot element is used to group the footer content in an HTML table.

  16. Row Groups (continued) • Note: <tfoot> must appear before <tbody> within a table, so that a browser can render the foot before receiving all the rows of data. • The table header, table body, and table footer must all contain the same number of columns. • Notice that these elements will not affect the layout of the table by default. However, you can use CSS to let these elements affect the table's layout.

  17. Specifying Table Size • <TABLE WIDTH=size HEIGHT=size> • Size can be in either pixels or as a percentage of the browser’s display area. • Percentages must be enclosed in quotation marks. Example: WIDTH =“70%”

  18. Creating a Spanning Cell • To create a cell that spans several columns, enter the COLSPAN property within the <TD> or <TH> tags as follows: <TD COLSPAN=value> where value is the number of columns spanned.

  19. Creating a Spanning Cell (continued) • To create a cell that spans several rows, enter the ROWSPAN property within the <TD> or <TH> tags as follows: <TD ROWSPAN=value> where value is the number of rows spanned.

  20. Creating a Page Layout with Tables • Create gutters and use cell padding to keep your columns from crowding each other. • Add background colors to columns to provide visual interest and variety. • Use the VALIGN=TOP property in cells containing articles, to ensure that the text flows from the top down.

  21. Creating a Page Layout with Tables(continued) • Use row spanning to vary the size and starting point of articles within your columns. Having all articles to start and end within the same row creates a static layout that is difficult to read. • Avoid having more than three columns of text, if possible. Inserting additional columns could make the column widths too narrow and make the text too hard to read.

More Related