saftutorials.com
CSS Tables Tutorial

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

Table Head

Table Head
Table Head
ContentContent
Content
Content
Content
Content

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

Col 1Col 2Col 3Col 4Col 5
Content CellContent Cell
Content Cell
Content Cell
Content Cell
Content Cell
Content Cell
Content Cell
Content Cell
Content Cell
Content Cell
Content Cell
Content Cell
Content Cell
Content Cell


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

}
You can use at a time only one alignment


Table Padding
Normally between table content and table no gap. If you want to make a space for table content then use Table Padding. It will be make a space for table content and make better look for table.
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;
}

Table Data Column hover css code

td:hover{
    bakcground: #ddd;
}

Table ODD or EVEN
Table odd or even make a different table looking. That means Table odd make a row or column another looking and even change another row or column another looking.
tr:nth-child(even) {
background-color: #ddd;
}
tr:nth-child(odd) {
background-color: #999;
}

Table Background and Color

Table background control table or row or column background color or image. And color control Table or row or column text color.

For Table Background and color control by using CSS
table {
    background: green;
    color: red;

}

For Table Row Background and color control by using CSS

tr {
    background: green;
    color: red;

}


For Table Data Column Background and color control by using CSS

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

SL Name Mark
1 John Smith 10
Find us on

Facebook Google Plus Twitter Pinterest YouTube

web statistic