CSS Tables

CSS Tutorial

CSS-Home CSS-Environment CSS-Basic syntax CSS-Selector CSS-How To Add CSS CSS-Comment CSS-Color CSS-Background CSS-Font CSS-Text CSS-Boarder CSS-Margin CSS-Padding CSS-Height/Width CSS-Link CSS-Table CSS-Visibility CSS-Scrollable CSS-Float/Clear CSS-Line CSS-Align CSS-Dimension CSS-Event CSS-Pusedo class CSS-Position CSS-Transparency CSS-Dropdown CSS-Form CSS-List/Counter CSS-Website layout CSS-Text effect CSS-Image effect CSS-Button effect CSS-page number CSS-Box CSS-@media CSS-Multi device CSS-Multi device 1 CSS-Multi device 2

« Previous Next »

You can to set different properties of an HTML table using CSS.

You can set following properties of a table − −

boarder : To specify table borders in CSS

border-collapse : To specify whether the table borders should be collapsed into a single border

padding : To specify the space between the border and the content in a table

width and height : To specify whether the table are defined by the width and height properties.

text-align : To specify the horizontal alignment (like left, right, or center) of the content

color : To specify table color in CSS.

background-color : To specify table background color in CSS.

You can learn how to create a table using HTML. HTMl Create Table

Example : CSS - Table

<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th
{
height: 30px;
text-align: left;
vertical-align: top;
padding: 15px;
background-color: #4CAF50;
color: white;
border:3px solid Yellow;
}
td {
border:3px solid blue;
text-align: right;
}
tr:hover {background-color: red;}
</style>
</head>
<body>

<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>Rock</td>
<td>23</td>
</tr>
<tr>
<td>Selina</td>
<td>Jack</td>
<td>29</td>
</tr>
<tr>
<td>Sam</td>
<td>Watson</td>
<td>12</td>
</tr>

</table>

</body>
</html>

When the above code is compiled , it produces the following result.

Result

Firstname	Lastname	Age
John	Rock	23
Selina	Jack	29
Sam	Watson	12

« Previous Next »

C++ Tutorial	CSS Tutorial	C# Tutorial	PHP Tutorial
Java Tutorial	SQL Tutorial	JQuery Tutorial	MySQL Tutorial
HTML - Tutorial	Node.Js Tutorial	JavaScript Tutorial	Python Tutorial
MySQL Installation	Node.js Installation	XAMPP -- Installation	Python Installation
C++ - Environment Setup	Java - Environment Setup	C# - Environment Setup	Responsive Web Design

CSS - Tables

Example : CSS - Table

Result