1 / 12

Tables

Tables . Creating tables in html. LWD. Pgs 129-141. Vocabulary. Rows are horizontal. Columns are vertical. . COLUMNS. ROWS. Elements to Know. table - <table> </table> identifies the code in between as a table. tr - < tr > </ tr > makes a new row in a table

galen
Télécharger la présentation

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 Creating tables in html LWD Pgs 129-141

  2. Vocabulary • Rows are horizontal. • Columns are vertical. COLUMNS ROWS

  3. Elements to Know • table - <table> </table> identifies the code in between as a table. • tr- <tr> </tr> makes a new row in a table • th- <th></th> identifies the table header • td - <td></td> establishes a cell within a table row

  4. Make a simple table Try writing the markup for the table shown below using Notepad or Text Edit.

  5. More Elements to Know • colspan – <colspan =“ “> Column Span are attributes to the td or th element, and stretches a cell to the right to span over the number of columns. (the number in the “ “ marks identifies how many columns to span

  6. Make a table with a column span Try writing the markup for the table shown below using Notepad or Text Edit.

  7. More Elements to Know • rowspan – <rowspan =“ “> Row spans work like column spans, except they cause the cell to span downward over several rows. The number in the “ “ marks identifies how many rows will be combined. Row spans always span downward, so the cell is part of the first row. Cells that are spanned over do not appear in the table code.

  8. Make a table with a row span Try writing the markup for the table shown below using Notepad or Text Edit. You will not have a border.

  9. More Elements to Know • cellpadding – <cellpadding =“ “> cell padding is the amount of space held between the contents of the cell and the cell border. example: <table cellpadding=“15”> • cellspacing - <cellspacing=“ “> Cell spacing is the amount of space held between cells, specified by the number of pixels. If you don’t specify anything, the browser will use the default value of 2 pixels between cells. example: <table cellpadding=“15” cell spacing=“15”>

  10. More Elements to Know • caption – <caption> used to give a table a title or brief description. The caption element must be the first thing within the table element. • summary - <summary = “ “> the summary provide a more lengthy description of the table and its contents. The summary element is in the table element. The summary is not rendered in visual browsers, but may be used by screen readers or other assistive devices to give visually impaired users a better understanding.

  11. More Elements to Know • Add a border to your table with CSS. (you can change the size (pixel) and color. <style type=“text/css”> td, th { border: 1px solid #CCC} table { border: 1px solid black} </style>

  12. The TABLE Challenge LWD Page 141

More Related