HTML Tables
Tables are made with the <table>
tag.
index.html
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
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
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
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
I'd appreciate it if you could carefully notice how we have used colspan
and rowspan
to increase the space of a cell.
Bedankt voor je feedback!
Vraag AI
Vraag AI
Vraag wat u wilt of probeer een van de voorgestelde vragen om onze chat te starten.
Awesome!
Completion rate improved to 7.69
HTML Tables
Veeg om het menu te tonen
Tables are made with the <table>
tag.
index.html
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
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
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
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
I'd appreciate it if you could carefully notice how we have used colspan
and rowspan
to increase the space of a cell.
Bedankt voor je feedback!