Results 1 to 5 of 5

Thread: HTML Tables

  1. #1

    HTML Tables

    Advertisement

    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.

  2. #2



    This table has no borders:


  3. 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.



    Advertisement






    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











    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

  4. #3



    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

  5. #4












    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 (";")

  6. #5





























    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

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •