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 |
No comments:
Post a Comment