Friday, 13 December 2013

CSS » Table

How You know with HTML You can create simple tables by defining the borders. The new in CSS is that You can style Your tables with simple codes. You add background, different border colors and so on.


Table Borders


» EXAMPLE:

<html>
<head>
<style>
table, th, td {
border: 1px solid blue;
}
</style>
</head>
<body>
<table>
<tr>
<th>HTML</th>
<th>CSS</th>
<th>PHP</th>
</tr>
<tr>
<td>body</td>
<td>class</td>
<td>var</td>
</tr>
<tr>
<td>head</td>
<td>id</td>
<td>string</td>
</tr>
</body>
</html>


» Result:



HTML CSS PHP
body class var
head id string



Notice that the table in the example above has double borders. This is because both the table and the th/td elements have separate borders.




Collapse Borders

The border-collapse property sets whether the table borders are collapsed into a single border or separated:


» EXAMPLE:


<html>
<head>
<style>
table {
border-collapse:collapse;
}
table, th, td {
border: 1px solid blue;
}
</style>
</head>
<body>
<table>
<tr>
<th>HTML</th>
<th>CSS</th>
<th>PHP</th>
</tr>
<tr>
<td>body</td>
<td>class</td>
<td>var</td>
</tr>
<tr>
<td>head</td>
<td>id</td>
<td>string</td>
</tr>
</body>
</html>


» Result:


HTML CSS PHP
body class var
head id string





Defining width and height
Width and height is defined by the width and height properties.


» EXAMPLE:


<html>
<head>
<style>
table, th, td {
border: 1px solid blue;
}
table {
width: 50%;
}
th {
height: 60px;
}
</style>
</head>
<body>
<table>
<tr>
<th>HTML</th>
<th>CSS</th>
<th>PHP</th>
</tr>
<tr>
<td>body</td>
<td>class</td>
<td>var</td>
</tr>
<tr>
<td>head</td>
<td>id</td>
<td>string</td>
</tr>
</body>
</html>


» Result:



HTML CSS PHP
body class var
head id string





Text Aligment
You can use text-align property, like text-align: left; , text-align: right; or text-align: center;


» EXAMPLE:


<html>
<head>
<style>
table, th, td {
border: 1px solid blue;
}
td {
text-align: right;
}
</style>
</head>
<body>
<table>
<tr>
<th>HTML</th>
<th>CSS</th>
<th>PHP</th>
</tr>
<tr>
<td>body</td>
<td>class</td>
<td>var</td>
</tr>
<tr>
<td>head</td>
<td>id</td>
<td>string</td>
</tr>
</body>
</html>


» Result:


HTML CSS PHP
body class var
head id string





Using vertical align
The vertical-align property sets the vertical alignment, like top, bottom, or middle:


» EXAMPLE:


<html>
<head>
<style>
table, th, td {
border: 1px solid blue;
}
td {
height: 70px;
vertical-align: bottom;
}
</style>
</head>
<body>
<table>
<tr>
<th>HTML</th>
<th>CSS</th>
<th>PHP</th>
</tr>
<tr>
<td>body</td>
<td>class</td>
<td>var</td>
</tr>
<tr>
<td>head</td>
<td>id</td>
<td>string</td>
</tr>
</body>
</html>


» Result:


HTML CSS PHP
body class var
head id string






Table Padding
Here You have to use the padding property.


» EXAMPLE:


<html>
<head>
<style>
table, th, td {
border: 1px solid blue;
}
td {
padding: 10px;
}
</style>
</head>
<body>
<table>
<tr>
<th>HTML</th>
<th>CSS</th>
<th>PHP</th>
</tr>
<tr>
<td>body</td>
<td>class</td>
<td>var</td>
</tr>
<tr>
<td>head</td>
<td>id</td>
<td>string</td>
</tr>
</body>
</html>


» Result:




HTML CSS PHP
body class var
head id string






Table Background
Here we will use background-color property to define background color of th elements.


» EXAMPLE:


<html>
<head>
<style>
table, th, td {
border: 1px solid blue;
}
th {
background-color: blue;
color: white;
}
</style>
</head>
<body>
<table>
<tr>
<th>HTML</th>
<th>CSS</th>
<th>PHP</th>
</tr>
<tr>
<td>body</td>
<td>class</td>
<td>var</td>
</tr>
<tr>
<td>head</td>
<td>id</td>
<td>string</td>
</tr>
</body>
</html>


» Result:


HTML CSS PHP
body class var
head id string