CSS Tables, TutorialsPoint, CSS Tables Tutorial

CSS Tables and Borders

We can apply style on HTML tables for better look and feel. There are some CSS properties that are widely used in designing table using CSS. Table Borders, Border-collapse, Padding, Width and Height, Text Align, Color and Backgroung Color these are CSS Table Styles.

Table Border: We can set border for the table, th and td tags using the CSS border property.

Table Border Collapse : border-collapse property, we can collapse all borders in one border only.

Table Padding : padding for table header and table data using the CSS padding property.

Table Width and Height : Width and height of a table are defined by the width and height properties.

Text Align : The text-align property sets the Horizontal alignment (like left, right, or center) and Vertical alignment (like top, bottom, or middle) of the content in <th> or <td>.

Table Colors and Backgrounds : The Background color and text color of <th> elements.

Table Border :

	
<html>
<head>
<title>Table Border</title>
</head>

<body>

<table border="1">
<thead>
<tr>
<th>Name</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sample Name</td>
<td>Sample Description</td>
</tr>
<tr>
<td>Sample Name-2</td>
<td>Sample Description-2</td>
</tr>
</tbody>
</table>

</body>
</html>

Output :

Table Border Collapse

<html>
<head>
<title>Table Border Collapse</title>
<style>  
 table, th, td {  
    border: 2px solid black;  
    border-collapse: collapse;  
 }  
</style>   
</head>
 
<table>
<thead>
<tr>
<th>Name</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sample Name</td>
<td>Sample Description</td>
</tr>
<tr>
<td>Sample Name-2</td>
<td>Sample Description-2</td>
</tr>
</tbody>
</table>
</body>
</html>

Output :

Name	Description
Sample Name	Sample Description
Sample Name-2	Sample Description-2

Table Padding

<html>
<head>
<title>Table Padding</title>
<style>  
table, th, td {  
    border: 1px solid black;  
    border-collapse: collapse;  
}  
th, td {
    padding: 10px;
}
</style>   
</head>

<body>
<table>
<thead>
<tr>
<th>Name</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sample Name</td>
<td>Sample Description</td>
</tr>
<tr>
<td>Sample Name-2</td>
<td>Sample Description-2</td>
</tr>
 
</tbody>
</table>
</body>
</html>

Output :

Name	Description
Sample Name	Sample Description
Sample Name-2	Sample Description-2

Table Width and Height

<html>
<head>
<title>Table Width and Height</title>
<style>
table, td, th {
    border: 1px solid black;
}
table {
    border-collapse: collapse;
    width: 100%;
}
th {
    height: 50px;
}
</style>  
</head>

<body>
<table>
<thead>
<tr>
<th>Name</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sample Name</td>
<td>Sample Description</td>
</tr>
<tr>
<td>Sample Name-2</td>
<td>Sample Description-2</td>
</tr>
 
</tbody>
</table>
</body>
</html>

Output :

Name	Description
Sample Name	Sample Description
Sample Name-2	Sample Description-2

Table Text Align

<html>
<head>
<title>Table Text Align</title>
<style>
table, td, th {
    border: 1px solid black;
}
table {
    border-collapse: collapse;
    width: 100%;
}
th { 
text-align:center;
}
td { 
text-align:left;
}
</style>  
</head>

<body>

<table>
<thead>
<tr>
<th>Name</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sample Name</td>
<td>Sample Description</td>
</tr>
<tr>
<td>Sample Name-2</td>
<td>Sample Description-2</td>
</tr>
</tbody>
</table>
</body>
</html>

Output :

Name	Description
Sample Name	Sample Description
Sample Name-2	Sample Description-2

Table Colors and Backgrounds

<html>
<head>
<title>Table Colors and Backgrounds</title>
<style>
table, td, th {border: 1px solid black; }
table{border-collapse: collapse; width: 100%;}
th{ height: 50px; text-align:center; background:#F60; color:#FFF;}
td{ text-align:center; background:#FC0; color:#000;}
</style>  
</head>

<body>
 
<table>
<thead>
<tr>
<th>Name</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sample Name</td>
<td>Sample Description</td>
</tr>
<tr>
<td>Sample Name-2</td>
<td>Sample Description-2</td>
</tr>
</tbody>
</table>
</body>
</html>

Output :

Name	Description
Sample Name	Sample Description
Sample Name-2	Sample Description-2

CSS Tutorial