table tags

What are table tags

Table tags allow web developers to arrange data into rows and columns.The  tag defines an HTML table.Each table row is defined with a  tag. Each table header is defined with a 

 tag. Each table data/cell is defined with a 

 tag. By default, the text in

elements is bold and centered. By default, the text in

elements is regular and left-aligned.
Note: The elements are the data containers of the table.They can contain all sorts of HTML elements; text, images, lists, other tables, etc.

(this is an example of  Table Tag)
<table>
<tbody>
<tr>
<td>row 1 cell 1</td>
<td>row 1 cell 2</td>
</tr>
<tr>
<td>row 2 cell 1</td>
<td>row2 cell 2</td>
</tr>
</tbody>
</table>

Exercise 5.1

In the editor below 
Create a table of 4 tech giants in the world along with where their headquarters is located.
The headings will be company and location.

See the Pen HTML-BasicTable by Ankit (@AnkitPathshalaCoding) on CodePen.

Table Attributes

The Table Object has a number of Methods and Attributes that can make it interactive for the user.
E.g. you can delete add and move rows.

Headers and Colspan
Table Headers and col- and row-spans can give the Table a bit more definition.
To create a Header use the th-tag instead of td-tag.
The Header will span accross multiple columns when you use the attribute colspan.
To span multiple rows : use rowspan

 

Headers and Colspan


Table Headers and col- and row-spans can give the Table a bit more definition.
To create a Header use the th-tag instead of td-tag.
The Header will span accross multiple columns when you use the attribute colspan.
To span multiple rows : use rowspan

Exercise 5.2

In the table below change the call span to 4 and add a new heading called city.
Input your favorite city of every country into the example