In css3 there are multiple properties can be applied on a table.
Following properties are given and explained below
1) Table Borders
2) Collapse Table Borders
3) Table Width and Height
4) Horizontal Alignment
5) Vertical Alignment
6) Table Padding
7) Hoverable Table
8) Table Color
Table with borders
An example of a simple with border is given below with source code.
<style type="text/css">
.table1,th,td{
border: 2px solid green;
}
</style>
<table class="table1">
<tr>
<th>name</th>
<th>rollNo</th>
<th>Address</th>
</tr>
<tr>
<td>Imran</td>
<td>1234</td>
<td>xyz</td>
</tr>
<tr>
<td>Hussain</td>
<td>5678</td><td>xyz</td>
</tr>
</table>
Output of above code
| name | rollNo | Address |
|---|---|---|
| Imran | 1234 | xyz |
| Hussain | 5678 | xyz |
Border collapse property
Border collapse property is used to specify the single border on
a table.
An example of a border collapse property is given below
with source code.
<style type="text/css">
.table1{
border-collapse: collapse;
}
.table1,th,td{
border: 1px solid green;
}
</style>
<table class="table1">
<tr>
<th>name</th>
<th>rollNo</th>
<th>Address</th>
</tr>
<tr>
<td>Imran</td>
<td>1234</td>
<td>xyz</td>
</tr>
<tr>
<td>Hussain</td>
<td>5678</td><td>xyz</td>
</tr>
</table>
Output of above code
| name | rollNo | Address |
|---|---|---|
| Imran | 1234 | xyz |
| Hussain | 5678 | xyz |
Table height and width properties
As in previous tutorials, height and width is explained deeply.
Similarly here you can also set height and width of a table.
An example of height and width properties on a table is given below
with source code.
<style type="text/css">
.table1{
height: 55px;
width: 100%;
border-collapse: collapse;
}
.table1,th,td{
border: 2px solid green;
}
</style>
<table class="table1">
<tr>
<th>name</th>
<th>rollNo</th>
<th>Address</th>
</tr>
<tr>
<td>Imran</td>
<td>1234</td>
<td>xyz</td>
</tr>
<tr>
<td>Hussain</td>
<td>5678</td><td>xyz</td>
</tr>
</table>
Output of above code
| name | rollNo | Address |
|---|---|---|
| Imran | 1234 | xyz |
| Hussain | 5678 | xyz |
Horizontal text align
Horizontal text align is used to specify the position of text
in x-axis.
An example of horizontal properties on a table is given below
with source code.
<style type="text/css">
.table1{
text-align: right;
height: 20vh;
width: 100%;
border-collapse: collapse;
}
.table1,th,td{
border: 2px solid orange;
}
</style>
<table class="table1">
<tr>
<th>name</th>
<th>rollNo</th>
<th>Address</th>
</tr>
<tr>
<td>Imran</td>
<td>1234</td>
<td>xyz</td>
</tr>
<tr>
<td>Hussain</td>
<td>5678</td><td>xyz</td>
</tr>
</table>
Output of above code
| name | rollNo | Address |
|---|---|---|
| Imran | 1234 | xyz |
| Hussain | 5678 | xyz |
Vertical text align
Vertical text align is used to specify the position of text
in y-axis. To specify the vertical align there is spefic vertical-align
property of css is used.
An example of vertical align properties on a table is given below
with source code.
<style type="text/css">
.table1{
height: 30vh;
width: 100%;
border-collapse: collapse;
}
.table1,th,td{
vertical-align: top;
border: 2px solid blue;
}
</style>
<table class="table1">
<tr>
<th>name</th>
<th>rollNo</th>
<th>Address</th>
</tr>
<tr>
<td>Imran</td>
<td>1234</td>
<td>xyz</td>
</tr>
<tr>
<td>Hussain</td>
<td>5678</td><td>xyz</td>
</tr>
</table>
Output of above code
| name | rollNo | Address |
|---|---|---|
| Imran | 1234 | xyz |
| Hussain | 5678 | xyz |
Padding property
As there are some by default spaces inside table.You can control these
default spaces by using padding property
An example of padding properties on a table is given below
with source code.
<style type="text/css">
.table1{
height: 30vh;
width: 100%;
border-collapse: collapse;
}
.table1,th,td{
padding: 20px;
border: 2px solid blue;
}
</style>
<table class="table1">
<tr>
<th>name</th>
<th>rollNo</th>
<th>Address</th>
</tr>
<tr>
<td>Imran</td>
<td>1234</td>
<td>xyz</td>
</tr>
<tr>
<td>Hussain</td>
<td>5678</td><td>xyz</td>
</tr>
</table>
Output of above code
| name | rollNo | Address |
|---|---|---|
| Imran | 1234 | xyz |
| Hussain | 5678 | xyz |
Hover property
Hoverable table makes it easy for user to use.
An example of hover properties on a table is given below
with source code.
<style type="text/css">
.table1 tr:hover{
background-color: lightgrey;
}
.table1{
height: 20vh;
width: 100%;
border-collapse: collapse;
}
.table1,th,td{
border: 1px solid blue;
}
</style>
<table class="table1">
<tr>
<th>name</th>
<th>rollNo</th>
<th>Address</th>
</tr>
<tr>
<td>Imran</td>
<td>1234</td>
<td>xyz</td>
</tr>
<tr>
<td>Hussain</td>
<td>5678</td><td>xyz</td>
</tr>
</table>
Output of above code
| name | rollNo | Address |
|---|---|---|
| Imran | 1234 | xyz |
| Hussain | 5678 | xyz |
Table color property
Many colors can be applied on a table.
An example of color properties on a table is given below
with source code.
<style type="text/css">
.table1 th{
background-color: lightgrey;
}
.table1 td{
background-color: #ccccff;
}
.table1{
height: 20vh;
width: 100%;
border-collapse: collapse;
}
.table1,th,td{
border: 1px solid blue;
}
</style>
<table class="table1">
<tr>
<th>name</th>
<th>rollNo</th>
<th>Address</th>
</tr>
<tr>
<td>Imran</td>
<td>1234</td>
<td>xyz</td>
</tr>
<tr>
<td>Hussain</td>
<td>5678</td><td>xyz</td>
</tr>
</table>
Output of above code
| name | rollNo | Address |
|---|---|---|
| Imran | 1234 | xyz |
| Hussain | 5678 | xyz |
The Best
Comment here
If you have any query, if you want to know something about any of technical course related to computer science field, if you have any suggestion about relevant to uploaded content or if you anything wrong here (any mistake in content) than please contact us. Keep in mind, comment should be according to community guidelines.
