HTML Tables
HTML table represents data in the form of rows and columns of a table (i.e. in 2-D form). We use the tables to organize the data in a manner.
<style>
.perfectTable, .perfectTable td, .perfectTable th{
border:1px solid rgba(220,220,220,1);
border-collapse:collapse;
padding:5px;
}
.onlyBorder, .onlyBorder td, .onlyBorder th{
border:1px solid rgba(220,220,220,1);
}
.withCollapse, .withCollapse td, .withCollapse th{
border:1px solid rgba(220,220,220,1);
border-collapse:collapse;
}
.withPadding, .withPadding td, .withPadding th{
border:1px solid rgba(220,220,220,1);
border-collapse:collapse;
padding:5px;
}
</style>
<table class="perfectTable">
<tr>
<th>Name</th>
<th>Salary</th>
<th>Expenses</th>
<tr>
<td>john</td>
<td>$20,000</td>
<td>$10,000</td>
</tr>
<tr>
<td>david</td>
<td>$30,000</td>
<td>$15,000</td>
</tr>
<tr>
<td>marry</td>
<td>$40,000</td>
<td>$15,000</td>
</tr>
</table>
table
It defines a table to organize the data in 2-D form. It contains the basic unit cells called data cells.
border="1" attribute sets the border of table, td and tr elements. The border may also be specified by CSS properties.
tr
This tag represents the table row that contains one or more data cells. It may also be called as the cells container.
td
This tag represents a discrete cell in a table row. td stands for table data i.e. a cell that contains the data.
th
It is the same as table data (td) but the content inside this cell is bold and is centered automatically. It is used for heading purposes in a table.
We have learnt how to make a table. Next, we learn how to design a table to make it more attractive.
Span attributes
rowspan attribute
rowspan attribute allows a single cell to contain more than one rows. In other words, two cells of two rows are merged to form one cell.
See the example below.
The integer value (1,2,3,4,5....) defines the number of rows to span. In the above example, a cell contains or spans two rows because the value of rowspan attribute is 2
colspan attribute
colspan attribute allows a cell to contain more than columns. Two cells are merged to contain one column.
See the example below.
The integer value represents the number of columns to span. In the above example, a single cell spans two cells.
thead, tbody and tfoot may also be used to build a table. thead element contains the table headings. tbody element contains the table data. tfoot element contains the summary of the data.
Stylish table
We use CSS properties to design the table.
border:1px;
Border may also be specified by border property.
<style>
.perfectTable, .perfectTable td, .perfectTable th{
border:1px solid rgba(220,220,220,1);
border-collapse:collapse;
padding:5px;
}
.onlyBorder, .onlyBorder td, .onlyBorder th{
border:1px solid rgba(220,220,220,1);
}
.withCollapse, .withCollapse td, .withCollapse th{
border:1px solid rgba(220,220,220,1);
border-collapse:collapse;
}
.withPadding, .withPadding td, .withPadding th{
border:1px solid rgba(220,220,220,1);
border-collapse:collapse;
padding:5px;
}
</style>
<table class="onlyBorder">
<tr>
<th>Name</th>
<th>Salary</th>
<th>Expenses</th>
<tr>
<td>john</td>
<td>$20,000</td>
<td>$10,000</td>
</tr>
<tr>
<td>david</td>
<td>$30,000</td>
<td>$15,000</td>
</tr>
<tr>
<td>marry</td>
<td>$40,000</td>
<td>$15,000</td>
</tr>
</table>
border-collapse:collapse;
collapse property collapses the borders of table, td, th.
<style>
.perfectTable, .perfectTable td, .perfectTable th{
border:1px solid rgba(220,220,220,1);
border-collapse:collapse;
padding:5px;
}
.onlyBorder, .onlyBorder td, .onlyBorder th{
border:1px solid rgba(220,220,220,1);
}
.withCollapse, .withCollapse td, .withCollapse th{
border:1px solid rgba(220,220,220,1);
border-collapse:collapse;
}
.withPadding, .withPadding td, .withPadding th{
border:1px solid rgba(220,220,220,1);
border-collapse:collapse;
padding:5px;
}
</style>
<table class="withCollapse">
<tr>
<th>Name</th>
<th>Salary</th>
<th>Expenses</th>
<tr>
<td>john</td>
<td>$20,000</td>
<td>$10,000</td>
</tr>
<tr>
<td>david</td>
<td>$30,000</td>
<td>$15,000</td>
</tr>
<tr>
<td>marry</td>
<td>$40,000</td>
<td>$15,000</td>
</tr>
</table>
padding
The data cells are not wide and represent a narrow look. padding property widens the area between content and border.
<style>
.perfectTable, .perfectTable td, .perfectTable th{
border:1px solid rgba(220,220,220,1);
border-collapse:collapse;
padding:5px;
}
.onlyBorder, .onlyBorder td, .onlyBorder th{
border:1px solid rgba(220,220,220,1);
}
.withCollapse, .withCollapse td, .withCollapse th{
border:1px solid rgba(220,220,220,1);
border-collapse:collapse;
}
.withPadding, .withPadding td, .withPadding th{
border:1px solid rgba(220,220,220,1);
border-collapse:collapse;
padding:5px;
}
</style>
<table class="withPadding">
<tr>
<th>Name</th>
<th>Salary</th>
<th>Expenses</th>
<tr>
<td>john</td>
<td>$20,000</td>
<td>$10,000</td>
</tr>
<tr>
<td>david</td>
<td>$30,000</td>
<td>$15,000</td>
</tr>
<tr>
<td>marry</td>
<td>$40,000</td>
<td>$15,000</td>
</tr>
</table>
If you want to learn how to style a table then click on the link css table.