CSS Table
What is table?Collection of rows and column to store and manage data is called table.
CSS different properties can be applied on table to improve the design and style of table.
Table Width & Height
Syntax:width:value;
height:value;
Example:
width:200px;
Height:300px;
Short program that will show you how we can set width and height of table?
<html>
<head>
<style>
table{
width=400px;
height:300px;
border:1px solid;
}
</style>
</head>
<body>
<table>
<tr>
<th>Sr.No</th>
<th>Name</th>
<th>City</th>
</tr>
<tr>
<td>1</td>
<td>Henry</td>
<td>London</td>
</tr>
<tr>
<td>2</td>
<td>John</td>
<td>Newyork</td>
</tr>
<tr>
<td>3</td>
<td>Alis</td>
<td>UK</td>
</tr>
</table>
</body>
</html>
Table Alignment
Alignment set the direction of a table.Syntax:
align:direction;
direction=>>left,center,right
Table Text Alignment
We can setup text alignment Horizontally or Vertically.Syntax:
Horizontal
text-align:direction;
direction==>left,right,center
Vertical
vertical-align:direction
direction=>>top,middle,bottom
vertical-align:direction;
Example:
text-align:center;
vertical-align:middle;
Table Border
Border is actually a line around the table data.
Example
table,td,th{
border:1px solid;
}
Border Collapse
Collapse actually used to define whether table border collapse into a single or seperated one.Example:
table{
border-collapse:collapse;
}
Table Color
Table Background Color
Background color is use to change the color of table cell,row,table.
Table Text Color
Table text color will change the content text of table.
How to change the table text and background color?
Short Code:
<html>
<head>
<style>
table{
background-color:darkgrey;
color:white;
}
</style>
</head>
<body>
<table>
<tr>
<th>Sr.No</th>
<th>Name</th>
<th>City</th>
</tr>
<tr>
<td>1</td>
<td>Henry</td>
<td>London</td>
</tr>
<tr>
<td>2</td>
<td>John</td>
<td>Newyork</td>
</tr>
<tr>
<td>3</td>
<td>Alis</td>
<td>UK</td>
</tr>
</table>
</body>
</html>
Table Padding
Padding actually used to set cell size.
Example:
td{
padding:10px;
}
Table Caption
Caption is used as a title of the table.
How to set caption positon?
caption{
caption-side:bottom;
}
