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

bookHTML Tables

Tables are made with the <table> tag.

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

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

index.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">
  • <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.

<table border = '1' style = 'border-collapse:collapse'>
index.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.

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

question mark

Which tag is used to create data for table headings?

Select the correct answer

Tutto è chiaro?

Come possiamo migliorarlo?

Grazie per i tuoi commenti!

Sezione 2. Capitolo 4

Chieda ad AI

expand

Chieda ad AI

ChatGPT

Chieda pure quello che desidera o provi una delle domande suggerite per iniziare la nostra conversazione

Awesome!

Completion rate improved to 7.69

bookHTML Tables

Scorri per mostrare il menu

Tables are made with the <table> tag.

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

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

index.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">
  • <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.

<table border = '1' style = 'border-collapse:collapse'>
index.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.

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

question mark

Which tag is used to create data for table headings?

Select the correct answer

Tutto è chiaro?

Come possiamo migliorarlo?

Grazie per i tuoi commenti!

Sezione 2. Capitolo 4
some-alt