Go Back   Wiki NewForum > Career Forum (Documents/Tutorials/Advice) > Tech Forum & Tutorial > HTML Forum & Tutorial

HTML Forum & Tutorial End-To-End Process HTML / XHTML / CSS

Reply
Views: 753 Source: CNN18.com, India-Forums, TellyChakkar, India, Times of India, Youtube, BollywoodLife, Rediff  
Thread Tools Rate Thread Display Modes
  #1  
Old 05-03-2009, 11:54 AM
welcomewiki welcomewiki is offline
Member
 
Join Date:
Dec 2008
Location:
India
Posts: 39,070
Default HTML Tables

HTML Tables

Apples 44% Bananas 23% Oranges 13% Other 10% Try it Yourself - Examples

Tables
How to define tables in an HTML document.
Table borders
This example demonstrates different table borders.
More examples at the bottom of the page.
Tables

Tables are defined with the tag. A table is divided into rows (with the tag), and each row is divided into data cells (with the , and elements are seldom used, because of bad browser support. Expect this to change in future versions of XHTML. If you have Internet Explorer 5.0 or newer, you can view a working example in our XML tutorial.

Ads
Reply With Quote
tag). The letters td stands for "table data," which is the content of a data cell. A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc.









row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2
How it looks in a browser:
row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2
Tables and the Border Attribute

If you do not specify a border attribute the table will be displayed without any borders. Sometimes this can be useful, but most of the time, you want the borders to show.
To display a table with borders, you will have to use the border attribute:





Row 1, cell 1 Row 1, cell 2

Headings in a Table

Headings in a table are defined with the
tag.













Heading Another Heading
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2
How it looks in a browser:
Heading Another Heading row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2
Empty Cells in a Table

Table cells with no content are not displayed very well in most browsers.









row 1, cell 1 row 1, cell 2
row 2, cell 1
How it looks in a browser:
row 1, cell 1 row 1, cell 2 row 2, cell 1
Note that the borders around the empty table cell are missing (NB! Mozilla Firefox displays the border).
To avoid this, add a non-breaking space (&nbsp to empty data cells, to make the borders visible:









row 1, cell 1 row 1, cell 2
row 2, cell 1  
How it looks in a browser:
row 1, cell 1 row 1, cell 2 row 2, cell 1
Basic Notes - Useful Tips

The
  #2  
Old 05-03-2009, 02:27 PM
welcomewiki welcomewiki is offline
Member
 
Join Date:
Dec 2008
Location:
India
Posts: 39,070
Default




This table has no borders:













100 200 300
400 500 600


And this table has no borders:













100 200 300
400 500 600





----------

This table has no borders:

100 200 300 400 500 600 And this table has no borders:

100 200 300 400 500 600
Reply With Quote
  #3  
Old 05-03-2009, 02:28 PM
welcomewiki welcomewiki is offline
Member
 
Join Date:
Dec 2008
Location:
India
Posts: 39,070
Default




Table headers:













Name Telephone Telephone
Bill Gates 555 77 854 555 77 855


Vertical headers:















First Name: Bill Gates
Telephone: 555 77 854
Telephone: 555 77 855





----

Table headers:

Name Telephone Telephone Bill Gates 555 77 854 555 77 855 Vertical headers:

First Name: Bill Gates Telephone: 555 77 854 Telephone: 555 77 855
Reply With Quote
  #4  
Old 05-03-2009, 02:28 PM
welcomewiki welcomewiki is offline
Member
 
Join Date:
Dec 2008
Location:
India
Posts: 39,070
Default













Some text Some text
Some text



As you can see, one of the cells has no border. That is because it is empty. Try to insert a space in the cell. Still it has no border.




The trick is to insert a no-breaking space in the cell.



No-breaking space is a character entity. If you don't know what a character entity is, read the chapter about it.



The no-breaking space entity starts with an ampersand ("&"),
then the letters "nbsp", and ends with a semicolon (";")











-----

Some text Some text
Some text



As you can see, one of the cells has no border. That is because it is empty. Try to insert a space in the cell. Still it has no border.
The trick is to insert a no-breaking space in the cell.
No-breaking space is a character entity. If you don't know what a character entity is, read the chapter about it.
The no-breaking space entity starts with an ampersand ("&"), then the letters "nbsp", and ends with a semicolon (";")
Reply With Quote
  #5  
Old 05-03-2009, 02:29 PM
welcomewiki welcomewiki is offline
Member
 
Join Date:
Dec 2008
Location:
India
Posts: 39,070
Default






























Money spent on.... January February
Clothes $241.10 $50.20
Make-Up $30.00 $44.45
Food $730.40 $650.00
Sum $1001.50 $744.65







----

Money spent on.... January February Clothes $241.10 $50.20 Make-Up $30.00 $44.45 Food $730.40 $650.00 Sum $1001.50 $744.65
Reply With Quote
Reply

New topics in HTML Forum & Tutorial

Thread Tools
Display Modes Rate This Thread
Rate This Thread:

Forum Jump


Powered by vBulletin® Version 3.8.10
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
asp web stats