CSS Table formatting
Border
The table border can be set by using the border property of CSS.
The example below specifies a black border for for the entire table , cluding the table headers <th> and table cells <td>
Sample code
table, th, td {border:1px solid black;}
Complete Example
<!DOCTYPE html> <html> <head> <style> table, th, td { border: 2px solid green; } </style> </head> <body> <h2>Example of table border</h2> <table> <tr> <th>Roll No</th> <th>Full Name</th> </tr> <tr> <td>101</td> <td>Antonio</td> </tr> <tr> <td>102</td> <td>Moses</td> </tr> </table> </body> </html>
Notice that the output of the example above produces a table with double borders. This is because both the table and the <th> and <td> elements have separate borders.
Border-collapse
The border-collapse property sets whether the table borders should be collapsed into a single border:
Sample code
table {border-collapse:separate;} table, th, td { border: 2px solid green; }
Values
collapse : A single border is created
separate: Double border effect is shown
inherit : Inherits the properties from its parent element.
EXAMPLE
<!DOCTYPE html> <html> <head> <style> table, th, td { border: 2px solid green; border-collapse:collapse; /*separate, inherit*/ } </style> </head> <body> <h2>Example of table border collapse</h2> <table> <tr> <th>Roll No</th> <th>Full Name</th> </tr> <tr> <td>101</td> <td>Antonio</td> </tr> <tr> <td>102</td> <td>Moses</td> </tr> </table> </body> </html>
Width/Height
Width and height of a table are defined by the width and height properties.
The example below sets the width of the table to 100%, and the height of the <th> to 50px:
table { width:100%;} th {height:50px;}
Example
<!DOCTYPE html> <html> <head> <style> table, td, th { border: 1px solid green; } table { width: 100%; border-collapse: collapse; } th {height:50px;} </style> </head> <body> <h2>Example of table width 100% and th height 50 px</h2> <table> <tr> <th>Roll No</th> <th>Full Name</th> </tr> <tr> <td>101</td> <td>Antonio</td> </tr> <tr> <td>102</td> <td>Moses</td> </tr> </table> </body> </html>
Text-align
The text-align property sets the horizontal alignment (like left, right, or center) of the content in <th> or <td>. By default, the content of <th> elements are center-aligned and the content of <td> elements are left-aligned.
The example below aligns the text inside <td> element to the center:
td{text-align:center;}
See how it works
<!DOCTYPE html> <html> <head> <style> table, td, th { border: 1px solid green; } table { width: 100%; border-collapse: collapse; } td {text-align:center;} </style> </head> <body> <h2>Example of text align for tables</h2> <table> <tr> <th>Roll No</th> <th>Full Name</th> </tr> <tr> <td>101</td> <td>Antonio</td> </tr> <tr> <td>102</td> <td>Moses</td> </tr> </table> </body> </html>
Vertical-align
The vertical-align property sets the vertical alignment (like top, bottom and middle) of the content in or . By default, the vertical alignment of the content in table is middle for both and elements.
The following example sels the vertical text alignment to bottom for elements:
Sample code
td {height:50px; vertical-align:bottom;}
See how it works
<!DOCTYPE html> <html> <head> <style> table, td, th { border: 1px solid green; } table { width: 100%; border-collapse: collapse; } td { height:50px; vertical-align:middle; /*top, middle, bottom*/ } </style> </head> <body> <h2>Example of vertical text align for tables</h2> <table> <tr> <th>Roll No</th> <th>Full Name</th> </tr> <tr> <td>101</td> <td>Antonio</td> </tr> <tr> <td>102</td> <td>Moses</td> </tr> </table> </body> </html>
Border-spacing
Specifies the distance between the borders of adjacent cells.
Example
<!DOCTYPE html> <html> <head> <style> table , th,td { border: 1px solid green; border-spacing:30px; /*wont show effect if border-collapse is collapse*/ border-collapse: separate; } </style> </head> <body> <h2>Example of border spacing </h2> <table> <tr> <th>Roll No</th> <th>Full Name</th> </tr> <tr> <td>101</td> <td>Antonio</td> </tr> <tr> <td>102</td> <td>Moses</td> </tr> </table> </body> </html>