Html table tags

2,348 views

Published on

HTML Table Tags - This tag is used to create and design tables.

Published in: Technology, Education
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,348
On SlideShare
0
From Embeds
0
Number of Embeds
360
Actions
Shares
0
Downloads
116
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Html table tags

  1. 1. www.eshikshak.co.in
  2. 2. Tables are very useful to arrange in HTMLand they are used very frequently by almost allweb developers. Tables are just like spreadsheets and they aremade up of rows and columns.Create a table in HTML/XHTML by using<table> tag. www.eshikshak.co.in
  3. 3. www.eshikshak.co.in
  4. 4. Table heading can be defined using <th>element.This tag will be put to replace <td> tag whichis used to represent actual data. www.eshikshak.co.in
  5. 5. www.eshikshak.co.in
  6. 6. There are two attributes called cell paddingand cell spacing which you will use to adjustthe white space in your table cell..Cell spacing defines the width of the border.While cell padding represents the distancebetween cell borders and the content within. www.eshikshak.co.in
  7. 7. <table border="1" cellpadding="5"cellspacing="5"><tr><th>Name</th><th>Salary</th></tr> Name Salary<tr> Ramesh Raman 5000<td>Prakash Khaire</td> Shabbir Hussein 7000<td>5000</td></tr><tr><td>Hardik Vyas</td><td>7000</td></tr></table> www.eshikshak.co.in
  8. 8. Use colspan attribute if you want to mergetwo or more columns into a single column.Use rowspan if you want to merge two ormore rows. www.eshikshak.co.in
  9. 9. <table border="1"><tr><th>Column 1</th><th>Column 2</th><th>Column 3</th> Column 1 Column 2 Column 3</tr> Row 1 Cell Row 1 Cell Row 1 Cell<tr><td rowspan="2">Row 1 Cell 1 2 Row 2 Cell 3 Row 2 Cell1</td> Row 3 Cell 1 2 3<td>Row 1 Cell 2</td><td>Row 1 Cell3</td></tr><tr><td>Row 2 Cell 2</td><td>Row 2Cell 3</td></tr><tr><td colspan="3">Row 3 Cell1</td></tr></table> www.eshikshak.co.in
  10. 10. Set table background using of the followingtwo ways: Using bgcolor attribute - You can set background color for whole table or just for one cell. Using background attribute - You can set background image for whole table or just for one cell. www.eshikshak.co.in
  11. 11. <table border="5" bordercolor="green" bgcolor="gray"><tr><th>Column 1</th><th>Column 2</th><th>Column 3</th> Column 1 Column 2 Column 3</tr><tr><td rowspan="2">Row 1 Cell 1</td> Row 1 Cell 1 Row 1 Cell 2 Row 1 Cell 3<td bgcolor="red">Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr> Row 2 Cell 2 Row 2 Cell 3<tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr> Row 3 Cell 1<tr><td colspan="3">Row 3 Cell 1</td></tr></table> www.eshikshak.co.in
  12. 12. set a table width and height using width andheight attributes.You can specify table width or height in termsof integer value or in terms of percentage ofavailable screen area. www.eshikshak.co.in
  13. 13. <table border="1" width="400" height="150"><tr><td>Row 1, Column 1</td><td>Row 1, Column 2</td> Row 1, Column 1 Row 1, Column 2</tr> Row 2, Column 1 Row 2, Column 2<tr><td>Row 2, Column 1</td><td>Row 2, Column 2</td></tr></table> www.eshikshak.co.in
  14. 14. The caption tags will serve as a title or explanation and show up at the top of the table.<table border="1"><caption>This is thecaption</caption> This is the caption<tr> row 1, row 1,<td>row 1, column 1</td> column 1 columnn 2<td>row 1, columnn 2</td></tr></table> www.eshikshak.co.in
  15. 15. Tables can be divided into three portions: a header a body a footThe head and foot are rather similar to headersand footers in a word-processed document thatremain the same for every page, while thebody is the main content of the table. www.eshikshak.co.in
  16. 16. The three elements for separating the head,body, and foot of a table are: <thead> - to create a separate table header. <tbody> - to indicate the main body of the table. <tfoot> - to create a separate table footer. www.eshikshak.co.in
  17. 17. <table border="1" width="100%"><thead><tr><td colspan="4">This is the head of the table</td></tr></thead><tfoot><tr><td colspan="4">This is the foot of the table</td></tr></tfoot><tbody><tr><td>Cell 1</td><td>Cell 2</td></tr><tr>...more rows here containing four cells...</tr></tbody><tbody><tr><td>Cell 1</td><td>Cell 2</td></tr><tr>...more rows here containing four cells...</tr></tbody></table> www.eshikshak.co.in
  18. 18. This is the head of the tableThis is the foot of the tableCell 1 Cell 2...more rows here containing four cells...Cell 1 Cell 2...more rows here containing four cells... www.eshikshak.co.in

×