Html Tables

  • 391 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
391
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
25
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Information Technology II HTML Tables
  • 2. Creating Table
  • 3. Table Elements
      • <table> --- </table>
          • defines a table in HTML document
      • <tr> --- </tr>
          • defines a table row
      • <th> --- </th>
          • defines a table header
      • <td> --- </td>
          • defines a table’s data cell
  • 4.
      • <table> start of table
      • <tr> start of row 1
      • <th> --- </th> cell in row 1 column 1 – 1 st heading
      • <th> --- </th> cell in row 1 column 2 – 2 nd heading
      • </tr> end of row 1
      • <tr> start of row 2
      • <td> --- </td> cell in row 2 column 1 – data 1
      • <td> --- </td> cell in row 2 column 2 – data 2
      • </tr> end of row 2
      • <tr> start of row 3
      • <td> --- </td> cell in row 3 column 1 – data 3
      • <td> --- </td> cell in row 3 column 2 – data 4
      • </tr> end of row 3
      • <caption> --- </caption> table caption
      • </table> end of table
    Table Structure
  • 5. Setting the table
    • Border
      • <table border=“yes/no”> ---- </table> (if yes, =“n”)
    • Color
      • <table bordercolor=“hexadecimal/basic”> ---- </table>
    • Background
      • Image
        • <table background=“pic.jpg”> ---- </table>
      • Color
        • <table bgcolor=“hexadecimal/basic”> ---- </table>
    • Alignment
      • <table align=“center/left/right”> ---- </table>
      • * the same with <th> and <td>
  • 6. Setting the cell
      • Cell Padding
          • the space between the cell border and cell contents
          • <table cellpadding=“n”> ---- </table>
      • Cell Spacing
          • the space between cells
          • <table cellspacing=“n”> ---- </table>
      • Cell Background
        • Color
          • <th bgcolor=“#FFFFFF/white”> ---- </th>
        • Image
          • <td background=“pic.jpg> ---- </td>
      • Width and Height
      • <th width=“n”> ---- </th>
      • <td height=“n”> ---- </td>
      • * same with <table>
  • 7. Spanning a Cell
      • Row Span
          • merge cells in row
          • <th rowspan=“n”> ---- </th>
          • <td rowspan=“n”> ---- </td>
      • where n is the number of rows to be merged
      • Column Span
          • merge cells in column
          • <th colspan=“n”> ---- </th>
          • <td colspan=“n”> ---- </td>
      • where n is the number of columns to be merged
  • 8. Assignment
    • Do Exercises 67, 68, 69, 70 and paste the links of these exercises to your page for checking. Pass this on or before Thursday.