1 / 11

Tables: Data in Rows and Columns What is Table? How Tables are Used? Designing Tables

Tables: Data in Rows and Columns What is Table? How Tables are Used? Designing Tables Table, Cell, Row Attributes Using Tables for Alignment When Tables Go Wrong?. Objectives Insert a table into an HTML document Manipulate the style, color, and width of a table’s border

xander-finley
Télécharger la présentation

Tables: Data in Rows and Columns What is Table? How Tables are Used? Designing 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. Tables: Data in Rows and Columns • What is Table? • How Tables are Used? • Designing Tables • Table, Cell, Row Attributes • Using Tables for Alignment • When Tables Go Wrong?

  2. Objectives • Insert a table into an HTML document • Manipulate the style, color, and width of a table’s border • Set the size of a table’s margin, cell spacing, and cell padding • Change a table’s width within the browser pane and cell width within the table • Use background colors within a table • Float text to the right or left of a table • Place captions above and below a table • Using Tables for Alignment • When Tables Go Wrong?

  3. Tables consist of horizontal rows and vertical columns which can be formatted according to your needs. The intersection of a row and a column is called a cell. HTML cells contain either data, numbers, text, an image -or header information describing the data in a column or row. What is Table? C L U M N ROW

  4. Organize information in a row and column format (Present tabular information) Present any type of information for which you want a lot of control over the positioning the material (Newspaper-like appearance; Control Layout) How Tables are Used?

  5. Table Containers <table>....</table>  encloses the table <th>....... </th>  defines the table headers <tr>.........</tr>  defines the table rows <td>.........</td>  surrounds the actual table data <caption>...</caption>  allows you to place a caption either above or below the table. The latest HTML specifications added five new table tags that let you format table columns and format and scroll portions of long tables <tbody>....</tbody> (*)  identifies a scrollable area of a table <thead>.....</thead> (*)  appears above the scrolling body <tfoot>.......</tfoot> (*)  appears belove the scrolling body <colgroup>..</colgroup> (*) provides means for combining a group of columns in a table <col/> (*)  allows you to control the appearance or attribute specifications for one or more tables

  6. <TABLE> <TR> <TD>Row 1, Column 1</TD> <TD>Row 1, Column 2</TD> </TR> <TR> <TD>Row 2, Column 1</TD> <TD>Row 2, Column 2</TD> </TR> </TABLE> 1. For each ROW, begin with <TR>, end with </TR> 2. For each CELL in a Row, begin with <TD>, end with </TD>3. No problem if you have 1 ROW, many CELLS.4. When you have more than 1 ROWS, might be a Problem. Why?Because, number of CELLS must be SAME at each ROW. Rule of MATRIX. Cell 1 : Row 1, Column 1 Cell 2 : Row 1, Column 2 Cell 3 : Row 2, Column 1 Cell 4 : Row 2, Column 2 Designing Tables

  7. < Table width = "100%“ (you may use percentage of window or pixel ) height = “5" cellspacing = "3" cellpadding = "3" border = "2" bordercolor = "#008000" background = "bilkent.gif" bgcolor = "#C0C0C0“ align = "right" rules(*) = “row”  controls the border around individual cell (none: just outside, column: just columns) frame(*) = “border” which sides of a table’s border are visible [box, void, above, below, hsides, vsides, lhs (left hand side), rhs.] > Table, Row, Cell Attributes

  8. < tr width = "100%“ (you may use percentage of window or pixel ) height = “5" border = "2" bordercolor = "#008000" background = "bilkent.gif" bgcolor = "#C0C0C0“ align = "right" valign = “right” > < td width = "100%“ (you may use percentage of window or pixel ) height = “8" border = "2" bordercolor = "#008000" background = "bilkent.gif" bgcolor = "#C0C0C0“ align = "right" valign = “right” > Table, Row, CellAttributes

  9. Q1. Assume that write the name of the lecture on Left alignment. write the date on Right alignment.BOTH must be on the sameLINE. Once you give an ALIGMENT property to a line, it will set the whole LINE’s property. So, you need to GIVE 2 different ALIGNMENT PROPERTY at 1 LINE. Using TABLES is the best way to solve this Problem. <table width=“100%”> <tr> <td width=“50%” align=“left”>Lecture 63242</td> <td width=“50%” align=“right”> 25.10.2004</td> </tr> </table> Using Tables for Alignment

  10. Q2. Assume that insert an image named bilkent.gif. write the date near the image. They must be vertically CENTERED as shown in the figure. Once you insert an image, write a text after it, the text’s bottom will be same level as image’s one. But, you want it to be centered. Using TABLES is the best way to solve this Problem. <table width=“100”> <tr> <td width=“70”> <img src=“bilkent.gif”></td> <td width=“30” valign=“middle”>25.10.2004</td> </tr> </table> 25.10.2004 Using Tables for Alignment

  11. If you don’t CLOSE your Table TAGS; table, tr, td • Assume that you want to build a table, with 2 rows, and 3 columns.The browser will understand this table’s dimensions by TAGS, so they must be defined correctly • If the CELL numbers are not equal at each ROW. • If you create a COLUMN, it must be valid for each ROW.?? Is there any way to OMIT, MERGE cells ?? • YES, you should merge cells by using COLSPAN and ROWSPAN tag attributes. • However, you don’t need to use them with non-authoring tools. When Tables Go Wrong?

More Related