CSS Table control HTML <table>, <tr>, <td>, <th>, <thead>, <tbody>, <tfoot> tag. You can control all Table element by CSS Table command.

Output of Table Tag

Structure of HTML Table

<table width="100" height="100" border="1">
<tr>
<td>Content here...</td>
</tr>
</table>

Table

Table is a main tag for a table. Table tag can`t generate a table without Table Row and Column.

table {
    width: 400px;
    height: 200px;
    padding: 5px;
}

Table Row

Table Row declare by HTML tag <tr></tr>. <tr> generate a row for a table. The table can`t make possible without <tr>. And it control by CSS tr command property.

tr {
    border: 1px solid #999;
    background: #eee;
    padding: 10px;
}

Table Column

Table Column declare by HTML Tag <td></td>. Table <td> stay inside of <tr>. And it`s control by CSS td command property.

td {
    border: 1px solid #999;
    background: #eee;
    padding: 5px;
}

Table Width and Height

Table width and height control how much width and height a table. Table width, height is not HTML tag it is a HTML tag property.

How to use Table width and height?

table{
    width: 100%;
    height: 150px;
}

Output of Table

Table Border

Normally table do not generate border. If you want to generate table with border you should use table border attribute.

th, tr, td{
    border:1px solid #999;
}

Table Border Collapse

Normally table border generate a thick border for 1 border value. But if you want to thin table border you can use border-collapse for border style.

table, tr, td {
    border-collapse: collapse;
} 

Table Alignment

Horizontal Align control table content left, center or right alignment.

table, tr, td {
    text-align: left; // for left side align content
    text-align: center; // for center side content
    text-align: right: // for right side content
}

You can use at a time only one alignment

Vertical Align control table content top, middle or bottom alignment.

table, tr, td {
    vertical-align: top; // for top align side content
    text-align: middle; // for middle side content
    text-align: right: // for bottom side content
}

table, tr, td {
    padding: 5px;
}

Table Hover

Table hover means when user hover mouse on table then table make a different from normal attribute. Table make use by :hover css command.

Table hover css code

table:hover{
    bakcground: #ddd;
}

Table Row hover css code

tr:hover{
    bakcground: #ddd;
}

td:hover{
    bakcground: #ddd;
}

tr:nth-child(even) {
 background-color: #ddd;
}

tr:nth-child(odd) {
  background-color: #999;
}

table {
    background: green;
    color: red;
}

tr {
    background: green;
    color: red;
}

td {
    background: green;
    color: red;
}

Bootstrap Responsive Table Class:

Bootstrap use for table below classes.

table: This class make a table responsive.

table-bordered: This class make a table bordered

table-hover: This class make a table hover-able.

Output for Bootstrap Table