آموزش گام به گام CSS 2.0 بخش آخر

 


برای تنظیم مکان قرار گیری متن در table از خاصیت های text-align و vertical-align استفاده میکنیم.

Code:
<.!DOCTYPE html>



table,td,th
{
border:1px solid black;
}
td
{
text-align:right;
}
<./style>
<./head>



Firstname<./th>
Lastname<./th>
Savings<./th>
<./tr>

Peter<./td>
Griffin<./td>
$100<./td>
<./tr>

Lois<./td>
Griffin<./td>
$150<./td>
<./tr>

Joe<./td>
Swanson<./td>
$300<./td>
<./tr>

Cleveland<./td>
Brown<./td>
$250<./td>
<./tr>
<./table>
<./body>
<./html>


مثالی برای کاربرد خاصیت vertical-align :

Code:
<.!DOCTYPE html>



table, td, th
{
border:1px solid black;
}
td
{
height:50px;
vertical-align:bottom;
}
<./style>
<./head>



Firstname<./th>
Lastname<./th>
Savings<./th>
<./tr>

Peter<./td>
Griffin<./td>
$100<./td>
<./tr>

Lois<./td>
Griffin<./td>
$150<./td>
<./tr>

Joe<./td>
Swanson<./td>
$300<./td>
<./tr>

Cleveland<./td>
Brown<./td>
$250<./td>
<./tr>
<./table>
<./body>
<./html>


برای تنظیم فضای بین border ومطالب داخل جدول از خاصیت Padding بصورت زیر استفاده میکنیم.

Code:
<.!DOCTYPE html>



table, td, th
{
border:1px solid black;
}
td
{
padding:15px;
}
<./style>
<./head>



Firstname<./th>
Lastname<./th>
Savings<./th>
<./tr>

Peter<./td>
Griffin<./td>
$100<./td>
<./tr>

Lois<./td>
Griffin<./td>
$150<./td>
<./tr>

Joe<./td>
Swanson<./td>
$300<./td>
<./tr>

Cleveland<./td>
Brown<./td>
$250<./td>
<./tr>
<./table>
<./body>
<./html>


همچنین میتوان برای جدول رنگ و رنگ پس ضمینه نیز تعیین کرد که در مثال زیر آمده است:

Code:
<.!DOCTYPE html>



table, td, th
{
border:1px solid green;
}
th
{
background-color:green;
color:white;
}
<./style>
<./head>



Firstname<./th>
Lastname<./th>
Savings<./th>
<./tr>

Peter<./td>
Griffin<./td>
$100<./td>
<./tr>

Lois<./td>
Griffin<./td>
$150<./td>
<./tr>

Joe<./td>
Swanson<./td>
$300<./td>
<./tr>

Cleveland<./td>
Brown<./td>
$250<./td>
<./tr>
<./table>
<./body>
<./html>