HTML Tables
Posted: Fri Oct 27, 2023 8:04 am
HTML Tables
HTML tables allow web developers to arrange data into rows and
columns.
Example
Company
Contact
Country
Alfreds Futterkiste
Maria Anders
Germany
Centro comercial Moctezuma
Francisco Chang
Mexico
Ernst Handel
Roland Mendel
Austria
Island Trading
Helen Bennett
UK
Laughing Bacchus Winecellars
Yoshi Tannamuri
Canada
Magazzini Alimentari Riuniti
Giovanni Rovelli
Italy
Try it Yourself »
Define an HTML Table
A table in HTML consists of table cells inside rows and columns.
Example
A simple HTML table:
<table>
<tr> <th>Company</th>
<th>Contact</th> <th>Country</th>
</tr>
<tr> <td>Alfreds Futterkiste</td>
<td>Maria
Anders</td> <td>Germany</td>
</tr> <tr> <td>Centro
comercial Moctezuma</td>
<td>Francisco
Chang</td> <td>Mexico</td>
</tr></table>
Try it Yourself »
Table Cells
Each table cell is defined by a
<td> and a </td> tag.
td
stands for table data.
Everything between <td> and </td> are the content of the table cell.
Example
<table>
<tr> <td>Emil</td>
<td>Tobias</td> <td>Linus</td>
</tr></table>
Try it Yourself »
Note: A table cell can contain
all sorts of HTML elements: text, images, lists, links, other tables, etc.
Table Rows
Each table row starts with a
<tr> and ends with a </tr> tag.
tr
stands for table row.
Example
<table>
<tr> <td>Emil</td>
<td>Tobias</td> <td>Linus</td>
</tr>
<tr> <td>16</td>
<td>14</td> <td>10</td>
</tr></table>
Try it Yourself »
You can have as many rows as you like in a table; just make sure that the number of cells are the same in each row.
Note: There are times when a row can have less or more cells than another. You will learn about that in a later chapter.
Table Headers
Sometimes you want your cells to be table header cells. In those cases use the
<th> tag instead of the
<td> tag:
th
stands for table header.
Example
Let the first row be table header cells:
<table>
<tr> <th>Person 1</th>
<th>Person 2</th> <th>Person
3</th>
</tr>
<tr> <td>Emil</td>
<td>Tobias</td> <td>Linus</td>
</tr>
<tr> <td>16</td>
<td>14</td> <td>10</td>
</tr></table>
Try it Yourself »
By default, the text in <th> elements
are bold and centered, but you can change that with CSS.
HTML Exercises
Test Yourself With Exercises
Exercise:
Add a table row with two table headers.
The two table headers should have the value "Name" and "Age".
<table>
<tr>
<td>Jill Smith</td>
<td>50</td>
</tr>
</table>
Submit Answer »
Start the Exercise
HTML Table Tags
Tag
Description
<table>
Defines a table
<th>
Defines a header cell in a table
<tr>
Defines a row in a table
<td>
Defines a cell in a table
<caption>
Defines a table caption
<colgroup>
Specifies a group of one or more columns in a table for formatting
<col>
Specifies column properties for each column within a <colgroup> element
<thead>
Groups the header content in a table
<tbody>
Groups the body content in a table
<tfoot>
Groups the footer content in a table
For a complete list of all available HTML tags, visit our HTML Tag Reference.
LEARN MORE
Styling Tables
Filter Table
Sort Table
Responsive Table
Zebra Striped Table
★
+1
Reference: https://www.w3schools.com/html/html_tables.asp
HTML tables allow web developers to arrange data into rows and
columns.
Example
Company
Contact
Country
Alfreds Futterkiste
Maria Anders
Germany
Centro comercial Moctezuma
Francisco Chang
Mexico
Ernst Handel
Roland Mendel
Austria
Island Trading
Helen Bennett
UK
Laughing Bacchus Winecellars
Yoshi Tannamuri
Canada
Magazzini Alimentari Riuniti
Giovanni Rovelli
Italy
Try it Yourself »
Define an HTML Table
A table in HTML consists of table cells inside rows and columns.
Example
A simple HTML table:
<table>
<tr> <th>Company</th>
<th>Contact</th> <th>Country</th>
</tr>
<tr> <td>Alfreds Futterkiste</td>
<td>Maria
Anders</td> <td>Germany</td>
</tr> <tr> <td>Centro
comercial Moctezuma</td>
<td>Francisco
Chang</td> <td>Mexico</td>
</tr></table>
Try it Yourself »
Table Cells
Each table cell is defined by a
<td> and a </td> tag.
td
stands for table data.
Everything between <td> and </td> are the content of the table cell.
Example
<table>
<tr> <td>Emil</td>
<td>Tobias</td> <td>Linus</td>
</tr></table>
Try it Yourself »
Note: A table cell can contain
all sorts of HTML elements: text, images, lists, links, other tables, etc.
Table Rows
Each table row starts with a
<tr> and ends with a </tr> tag.
tr
stands for table row.
Example
<table>
<tr> <td>Emil</td>
<td>Tobias</td> <td>Linus</td>
</tr>
<tr> <td>16</td>
<td>14</td> <td>10</td>
</tr></table>
Try it Yourself »
You can have as many rows as you like in a table; just make sure that the number of cells are the same in each row.
Note: There are times when a row can have less or more cells than another. You will learn about that in a later chapter.
Table Headers
Sometimes you want your cells to be table header cells. In those cases use the
<th> tag instead of the
<td> tag:
th
stands for table header.
Example
Let the first row be table header cells:
<table>
<tr> <th>Person 1</th>
<th>Person 2</th> <th>Person
3</th>
</tr>
<tr> <td>Emil</td>
<td>Tobias</td> <td>Linus</td>
</tr>
<tr> <td>16</td>
<td>14</td> <td>10</td>
</tr></table>
Try it Yourself »
By default, the text in <th> elements
are bold and centered, but you can change that with CSS.
HTML Exercises
Test Yourself With Exercises
Exercise:
Add a table row with two table headers.
The two table headers should have the value "Name" and "Age".
<table>
<tr>
<td>Jill Smith</td>
<td>50</td>
</tr>
</table>
Submit Answer »
Start the Exercise
HTML Table Tags
Tag
Description
<table>
Defines a table
<th>
Defines a header cell in a table
<tr>
Defines a row in a table
<td>
Defines a cell in a table
<caption>
Defines a table caption
<colgroup>
Specifies a group of one or more columns in a table for formatting
<col>
Specifies column properties for each column within a <colgroup> element
<thead>
Groups the header content in a table
<tbody>
Groups the body content in a table
<tfoot>
Groups the footer content in a table
For a complete list of all available HTML tags, visit our HTML Tag Reference.
LEARN MORE
Styling Tables
Filter Table
Sort Table
Responsive Table
Zebra Striped Table
★
+1
Reference: https://www.w3schools.com/html/html_tables.asp