Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Apprendre HTML Tables | Working with Semantic Elements, Multimedia Elements and Graphics
HTML for Beginners
course content

Contenu du cours

HTML for Beginners

HTML for Beginners

1. Understanding Basic Elements
2. Working with Semantic Elements, Multimedia Elements and Graphics
3. Working with Advanced Elements

book
HTML Tables

Tables are made with the <table> tag.

html

index.html

copy

A table is just a concept for a collection of records. So we need to have records to create a table. Records are created with the <tr> (table row) tag. For a record to exist, you have to include data. You add table data with the <td> (table data) tag.

html

index.html

copy

So our table has 2 rows and 2 columns. These columns need headings so everyone can understand what these columns represent.

To create a column heading, you use the <th> (table heading) tag instead of the <td> tag.

html

index.html

copy

You can see the column headings are displayed in bold text. This is an effect of <th> tags.

However, this doesn't feel like a table without lines between table data. We add these lines using the border attribute of the <table> element.

Replace the first <table> with this line:

  • <table border="1">: It sets the border around the table cells.
  • <table border="0">: It removes (not set) the border around the table cells.

As explained in a previous chapter, we add CSS styles using the style attribute.

html

index.html

copy

Colspan and rowspan attributes

2 unique attributes can be used with table cells. You can span table cells to 2 or more columns or rows.

html

index.html

copy

I'd appreciate it if you could carefully notice how we have used colspan and rowspan to increase the space of a cell.

Which tag is used to create data for table headings?

Which tag is used to create data for table headings?

Sélectionnez la réponse correcte

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 2. Chapitre 4
We're sorry to hear that something went wrong. What happened?
some-alt