© 2023 AposTube

Learn HTML #20

June 13 • 3:20 pm

Tags:

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

 

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>Swift Games</td>
    <td>Name</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
</table>

Table Cells

Each table cell is defined by a <td> and a </td> tag.

Note: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>

Note: table data elements are the data containers of the table.
They can contain all sorts of HTML elements; text, images, lists, other tables, etc.

Table Rows

Each table row starts with a <tr> and end 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>

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 where 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 headers, in those cases use the <th> tag instead of the <td> tag:

Example

Let the first row be table headers:

<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>
Note: By default, the text in <th> elements are bold and centered, but you can change that with CSS.

Apostube

See author's posts

Categories

Prev
Next

43 Responses

Leave a Reply

Your email address will not be published. Required fields are marked *

© 2023 AposTube. Built with ❤️ using WordPress and Ketos Theme.