Tables for tabular data. Tags table, td, tr, and the. HTML
Tables are used for displaying tabular data on the page. Tables have already been used to define the layout of a page, but currently, this practice is discouraged, being replaced by tableless (concept of a layout without tables).
Example:
<! DOCTYPE html PUBLIC “- // W3C // DTD XHTML 1.0 Transitional // EN” ” https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd “>
<html xmlns = ” http : //www.w3.org/1999/xhtml “>
<head>
<meta http-equiv =” Content-Type “content =” text / html; charset = iso-8859-1 “/>
<title> Tables for tabular data </ title>
<link href = “tables_style.css” rel = “stylesheet” type = “text / css” />
</ head>
<body>
<h1> Tables for tabular data </ h1>
<table width = “400” border = “0” cellpadding = “1” cellspacing = “1”>
<tr>
<th> City </ th>
<th> State </ th>
<th> link </ th>
</ tr>
<tr>
<td> Texas </ td>
<td> TX </ td>
<td> texas.gov </ td>
</ tr>
<tr>
<td> New York </ td>
<td> NY </ td>
<td> nyc.gov </ td>
</ tr>
<tr>
<td> New Jersey </ td>
<td> NJ </ td>
<td> nj.gov </ td>
</ tr>
</ table>
</ body>
</ html>
The tags used to build the table above were:
table: Main table tag. This tag uses some attributes.
- width = “400” – here we define the width of the table
- border = “0” – We took the traditional edge of the table. If you want to see the border, just put the value 1
- cell padding = “1” – This property defines the cell’s internal spacing. (similar to CSS padding).
- cell spacing = “1” – This property defines the outer spacing of the cell, in which case this spacing is the same as the interval between cells. (similar to the CSS margin).
Tr: This property defines a table row.
Th: This tag defines the row header of the table. Every cell structured with th will have the bolded and centered value.
Although it was used in the first row, th can also be used in the first column.
td: This property defines the columns of the table
Table formatting
The table comes with the standard formatting of HTML. To change the formatting, we need to use CSS. For this, create a file with the name style_table.css and save it in the same folder as the example above. Below is the style_tables.css file code.
body {
font: 12px Verdana, Arial, Helvetica, sans-serif;
color: # 333333;
}
table {
background: #CCCCCC;
}
th {
background: # E9E9E9;
padding: 5px;
}
td {
padding: 5px;
background-color: #FFFFFF;
}
Analyzing the code above:
All the properties used above are already known. However, it is essential to look at the context that is used.
Note that we assign a dark gray value to the background-color property of the table selector so that the table background will be a dark gray.
We use the white color in the td selector that corresponds to the cells. But will not the color of the cells overlap the color of the table?
This will happen, but if we analyze the HTML of the table, we will see the use of cell spacing = “1” this means that between the cells, there will be 1px of space, and this space will generate a kind of border in the cells.
The tag also received a particular color precisely to highlight the table header.
Another interesting strategy was padding in the th and td selectors. With this, internal spacing exists in the cells, leaving the text unglued from the edges.
