0% found this document useful (0 votes)
17 views

HTML Tables

The document discusses HTML tables and how to structure data into rows and columns using various table elements like <table>, <tr>, <td>, and <th>. It provides examples of defining a basic HTML table with header rows using <th> and regular rows using <tr> and <td> cells to hold the data. The document also covers table headers, rows, and cells in more detail.
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
17 views

HTML Tables

The document discusses HTML tables and how to structure data into rows and columns using various table elements like <table>, <tr>, <td>, and <th>. It provides examples of defining a basic HTML table with header rows using <th> and regular rows using <tr> and <td> cells to hold the data. The document also covers table headers, rows, and cells in more detail.
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

17/2/23, 17:52 HTML Tables

 Bootcamp Menu  Log in


Dark mode
Dark code
  HTML CSS   

HTML Tables
❮ Previous Next ❯

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 »

https://www.w3schools.com/html/html_tables.asp 1/14
17/2/23, 17:52 HTML Tables

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.

https://www.w3schools.com/html/html_tables.asp 2/14
17/2/23, 17:52 HTML Tables

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.

ADVERTISEMENT

Table Rows
Each table row starts with a <tr> and ends with a </tr> tag.

https://www.w3schools.com/html/html_tables.asp 3/14
17/2/23, 17:52 HTML Tables

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:

https://www.w3schools.com/html/html_tables.asp 4/14
17/2/23, 17:52 HTML Tables

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

https://www.w3schools.com/html/html_tables.asp 5/14
17/2/23, 17:52 HTML Tables

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

https://www.w3schools.com/html/html_tables.asp 6/14
17/2/23, 17:52 HTML Tables

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

❮ Previous Next ❯

ADVERTISEMENT

https://www.w3schools.com/html/html_tables.asp 7/14

You might also like