1. HTML Tables

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

3. 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 1row 2, cell 2

4. 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:

5. Example Row 1, cell 1 Row 1, cell 2

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

7. How it looks in a browser: HeadingAnother Heading row 1, cell 1row 1, cell 2 row 2, cell 1row 2, cell 2

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

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

10. Example row 1, cell 1 row 1, cell 2 row 2, cell 1

11. How it looks in a browser: row 1, cell 1row 1, cell 2 row 2, cell 1row 2, cell 2

12. Table with no borders This table has no borders: 100 200 300 400 500 600 And this table has no borders: 100 200 300 400 500 600

13. How it looks in a browser: This table has no borders: 100 200 300 400 500 600 And this table has no borders: 100 200 300 400 500 600

14. Table with Headings Table headers: Name Telephone Bill Gates 555 77 854 555 77 855 Vertical headers: First Name: Bill Gates Telephone: 555 77 854 Telephone: 555 77 855

15. How it looks in a browser: NameTelephone Bill Gates555 77 854555 77 855 First Name:Bill Gates Telephone:555 77 854 Telephone:555 77 855 Table headers: Vertical headers:

16. Table with a caption This table has a caption, and a thick border: My Caption 100 200 300 400 500 600

17. Example 100200300 400500600

18. Cell that span two columns Cell that spans two columns: Name Telephone Bill Gates 555 77 854 555 77 855 Cell that spans two rows: First Name: Bill Gates Telephone: 555 77 854 555 77 855

19. Example Cell that spans two columns: NameTelephone Bill Gates555 77 854555 77 855 Cell that spans two rows: First Name:Bill Gates Telephone: 555 77 854 555 77 855

20. Tags inside a table This is a paragraph This is another paragraph This cell contains a table: A B C D This cell contains a list apples bananas pineapples HELLO

21. Cell padding Without cellpadding: First Row Second Row With cellpadding: <table border="1" cellpadding="10"> First Row Second Row

22. Example Without cellpadding : FirstRow SecondRow With cellpadding: FirstRow SecondRow

23. Cell spacing Without cellspacing: First Row Second Row With cellspacing: <table border="1" cellspacing="10"> First Row Second Row

24. Example Without cellspacing: FirstRow SecondRow With cellspacing: FirstRow SecondRow

25. Table Tags TagDescription Defines a table Defines a table header Defines a table row Defines a table cell Defines a tables caption Defines groups of table columns Defines the attribute values for one or more columns in a table Defines a table head Defines a table body Defines a table footer