CSS table


Table borders in CSS

For setting table borders in CSS one can apply borders using border tag.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
table,th,td{
border:1px solid red;
}
</style>
<title>
TABLE BORDERS IN CSS
</title>
</head>
<body>
<table>
<tr>
<th>NAME</th>
<th>NUMBER</th>
</tr>
<tr>
<td>ANKIT</td>
<td>8981324446</td>
</tr>
<tr>
<td>ASHUTOSH</td>
<td>9051320061</td>
</tr>
</table>
</body>
</html>

Output:

NAME NUMBER
ANKIT 8981324446
ASHUTOSH 9051320061

Width and height of table in CSS

For setting table width and height width and height properties are used respectively.

Text alignment in CSS tables

Text alignment in CSS table can be set by using text-alignment property.

Vertical alignment in CSS tables

Texts can be aligned vertically by using vertical-align property.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
table,th,td{
border:1px solid red;
}
table{
width:100%;
}
th{
height:70px;
text-align:center;
vertical-align:top;
}
td{
height:70px;
text-align:right;
vertical-align:bottom
}
</style>
<title>
TABLE BORDERS IN CSS
</title>
</head>
<body>
<table>
<tr>
<th>NAME</th>
<th>NUMBER</th>
</tr>
<tr>
<td>ANKIT</td>
<td>8981324446</td>
</tr>
<tr>
<td>ASHUTOSH</td>
<td>9051320061</td>
</tr>
</table>
</body>
</html>

Output:

NAME NUMBER
ANKIT 8981324446
ASHUTOSH 9051320061

Table padding in CSS

Padding means empty space around table boundary and its content.Padding can be defined using padding property in CSS.

Some more styles for tables in CSS


Adding borders to tables in CSS

Using border-top and border-bottom properties we can add borders to either up or down side in CSS respectively.
<!DOCTYPE html>
<html>
<head>
<style>
table{
border-collapse:collapse;
width:100%;
}
th,td{
padding:10px;
text-align:left;
boder-bottom:1px solid green;
</style>
<title>
CSS BORDERS
</title>
</head>
<body>
<table>
<tr>
<th>NAME</th>
<th>NUMBER</th>
</tr>
<tr>
<td>ANKIT</td>
<td>8981324446</td>
</tr>
<tr>
<td>ASHUTOSH</td>
<td>9051320061</td>
</tr>
</table>
</body>
</html>

Output:

NAME NUMBER
ANKIT 8981324446
ASHUTOSH 9051320061
Here there is space of 10px between table border and its content.To understand concept of padding more clearly copy the above example in notepad then after changing padding value see the change in output.

Designing a stylish table using CSS

    Few points to remember before proceeding:
  • To select even or odd row we can use tr:nth-child(even) or tr:nth-child(odd) properties respectively.
  • We can change the background-color of table headind,rows and table data using using background-color:color name property.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
table{
border-collapse:collapse;
width:100%;
}
th,td{
text-align:left;
padding:10px;
}
th{
background-color:green;
}
tr:nth-child(even){
background-color:black;
color:white;
}
</style>
<title>
CSS TABLES
</title>
</head>
<body>
<table>
<tr>
<th>NAME</th>
<th>NUMBER</th>
</tr>
<tr>
<td>ANKIT</td>
<td>8981324446</td>
</tr>
<tr>
<td>ASHUTOSH</td>
<td>9051320061</td>
</tr>
</table>
</body>
</html>

Output:

NAME NUMBER
ANKIT 8981324446
ASHUTOSH 9051320061