際際滷

際際滷Share a Scribd company logo

Html Tables

Download as PPT, PDF
Ken Abraham Saluta
Ken Abraham Saluta

The document describes various HTML elements and attributes used to create and style tables. It defines the <table>, <tr>, <th>, and <td> elements used to define the structure of a table with rows and cells. It also discusses various attributes that can be added to the <table>, <tr>, <th>, and <td> elements to control the appearance of the table, such as borders, background colors, padding, spacing, and width/height. It concludes by discussing how to merge or "span" cells across rows or columns using the rowspan and colspan attributes.

1 of 8
Downloaded 38 times
Information Technology II HTML Tables
Creating Table
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 tables data cell
<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
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>
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>
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
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.

More Related Content

Html Tables

  • 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 tables 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.