leafleafleafDocy banner shape 01Docy banner shape 02Man illustrationFlower illustration

HTML table

Estimated reading: 4 minutes 15 views

TML table example:

First NameLast NamePoints
JillSmith50
EveJackson94
JohnDoe80
AdamJohnson67
HTML Table Example

HTML table

Tables are defined by the <table> tag. Each table has rows (defined by <tr> tags), and each row is divided into cells (defined by <td> tags). The letters td refer to table data, the contents of data cells. Data cells can contain text, pictures, lists, paragraphs, forms, horizontal lines, tables, and more.

Form example

example

<table border="1">
    <tr>
        <td> row 1, cell 1 </td>
        <td> row 1, cell 2 </td>
    </tr>
    <tr>
        <td> row 2, cell 1 </td>
        <td> row 2, cell 2 </td>
    </tr>
</table>

The browser displays the following:


HTML table and border attributes

If you do not define the border property, the table will not display a border. Sometimes this is useful, but most of the time we want to show the border.

Use the border property to display a table with borders:

example

<table border="1">
    <tr>
        <td> Row 1, cell 1 </td>
        <td> Row 1, cell 2 </td>
    </tr>
</table>

HTML table header

Table headers are defined using the <th> tag.

Most browsers will display the header as bold centered text:

example

<table border="1">
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

The browser displays the following:


More examples

A table without borders
This example demonstrates a table without borders.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Robort Tutorial (coding180.com)</title>
</head>
<body>
<h4>This table has no borders:</h4>
<table border="0">
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>400</td>
  <td>500</td>
  <td>600</td>
</tr>
</table>

</body>
</html>

Output:

no border table
no border table

The table header (Heading)
This example demonstrates how to display the table header.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Robort Heaven Tutorial (zzzzz.com)</title>
</head>
<body>

<h4>Horizontal heading:</h4>
<table border="1">
<tr>
  <th>Name</th>
  <th>Telephone</th>
  <th>Age</th>
</tr>
<tr>
  <td>Robort Gabriel</td>
  <td>555 77 854</td>
  <td>99</td>
</tr>
</table>

<h4>Vertical heading:</h4>
<table border="1">
<tr>
  <th>First Name:</th>
  <td>Bill Gates</td>
</tr>
<tr>
  <th>Telephone:</th>
  <td>555 77 854</td>
</tr>
<tr>
  <th>Age:</th>
  <td>59</td>
</tr>
</table>

</body>
</html>

Table with Captions
This example demonstrates a table with captions

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title> Robort Tutorial (coding180.com)</title> 
</head>
<body>

<table border="1">
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$50</td>
  </tr>
</table>

</body>
</html>

Table cells that span rows or columns
This example demonstrates how to define table cells that span rows or columns.

Labels within tables
This example demonstrates how to display elements within different elements.

Cell padding
This example demonstrates how to use Cell padding to create white space between the cell content and its border.

Cell spacing
This example demonstrates how to use Cell spacing to increase the distance between cells.

beautiful form


HTML table tag

LabelDescription
<table>Define table
<th>Define the header of the table
<tr>Define the row of the table
<td>Define the row of the Data
<caption>define table title
<colgroup>Groups that define table columns
<col>Define properties for table columns
<thead>Define the header of the table
<tbody>Define the body of the Table
<tfoot>Define the footer of the table

Leave a Comment

CONTENTS