Course Content
HTML for Beginners
HTML for Beginners
HTML Tables
Tables are made with the <table>
tag.
index
index
index
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
index
index
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
index
index
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.
index
index
index
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
index
index
I'd appreciate it if you could carefully notice how we have used colspan
and rowspan
to increase the space of a cell.
Thanks for your feedback!