4/4/13
HTML Tables
HTML Tables
Previous Next Chapter
HTML Table Example:
First Name Last Name Points Jill Eve John Adam Smith Jackson Doe Johnson 50 94 80 67
Try it Yourself - Examples
Tables How to create tables in an HTML document. (You can find more examples at the bottom of this page).
HTML Tables
Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). td stands for "table data," and holds the content of a data cell. A <td> tag can contain text, links, images, lists, forms, other tables, etc.
Table Example
< t a b l eb o r d e r = " 1 " > < t r > < t d > r o w1 ,c e l l1 < / t d > < t d > r o w1 ,c e l l2 < / t d > < / t r > < t r > < t d > r o w2 ,c e l l1 < / t d > < t d > r o w2 ,c e l l2 < / t d > < / t r > < / t a b l e >
How the HTML code above looks in a browser: row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2
HTML Tables and the Border Attribute
If you do not specify a border attribute, the table will be displayed without borders. Sometimes this can be
w3schools.com/html/html_tables.asp 1/3
4/4/13
HTML Tables
useful, but most of the time, we want the borders to show. To display a table with borders, specify the border attribute:
< t a b l eb o r d e r = " 1 " > < t r > < t d > R o w1 ,c e l l1 < / t d > < t d > R o w1 ,c e l l2 < / t d > < / t r > < / t a b l e >
HTML Table Headers
Header information in a table are defined with the <th> tag. All major browsers display the text in the <th> element as bold and centered.
< t a b l eb o r d e r = " 1 " > < t r > < t h > H e a d e r1 < / t h > < t h > H e a d e r2 < / t h > < / t r > < t r > < t d > r o w1 ,c e l l1 < / t d > < t d > r o w1 ,c e l l2 < / t d > < / t r > < t r > < t d > r o w2 ,c e l l1 < / t d > < t d > r o w2 ,c e l l2 < / t d > < / t r > < / t a b l e >
How the HTML code above looks in your browser: Header 1 Header 2
row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2
More Examples
Tables without borders How to create tables without borders. Table headers How to create table headers. Table with a caption How to add a caption to a table. Table cells that span more than one row/column How to define table cells that span more than one row or one column. Tags inside a table How to display elements inside other elements.
w3schools.com/html/html_tables.asp 2/3
4/4/13
HTML Tables
Cell padding How to use cellpadding to create more white space between the cell content and its borders. Cell spacing How to use cellspacing to increase the distance between the cells.
HTML Table Tags
Tag <table> <th> <tr> <td> <caption> <colgroup> <col> <thead> <tbody> <tfoot> Description Defines a table Defines a header cell in a table Defines a row in a table Defines a cell in a table Defines a table caption Specifies a group of one or more columns in a table for formatting Specifies column properties for each column within a <colgroup> element Groups the header content in a table Groups the body content in a table Groups the footer content in a table
Previous
Next Chapter
w3schools.com/html/html_tables.asp
3/3
