| سپیده 313 |
جمعه ۱۱ بهمن ۱۳۹۲ ۰۴:۲۶ بعد از ظهر |
 آموزش CSS، جلسه دوازدهم
متن در جدول با مشخصه های text-align و vertical-align ترازبندی می شود.
مشخصه text-align به صورت افقی مانند چپ چین(left)، راست چین(right)، وسط چین(center)تراز بندی می کند.
|
<html>
<head>
<style>
table,td,th
{
border:1px solid black;
}
td
{
text-align:right;
}
</style>
</head>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>City</th>
</tr>
<tr>
<td>Zahra</td>
<td>Rezaei</td>
<td>Mashhad</td>
</tr>
<tr>
<td>Fatemeh</td>
<td>Ahmadi</td>
<td>Tehran</td>
</tr>
</table>
</body>
</html>
|
مشخصه vertical-align به صورت عمودی مانند بالا(top)، پایین(bottom) و وسط(middle) تراز بندی می کند.
|
<html>
<head>
<style>
table, td, th
{
border:1px solid black;
}
td
{
height:50px;
vertical-align:top;
}
</style>
</head>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>City</th>
</tr>
<tr>
<td>Fatemeh</td>
<td>Ahmadi</td>
<td>Tehran</td>
</tr>
<tr>
<td>Masoomeh</td>
<td>Atefi</td>
<td>Shiraz</td>
</tr>
</table>
</body>
</html>
|
برای کنترل فاصلۀ بین border و محتوا در یک جدول، از مشخصه padding در th و td استفاده می کنیم.
در مثال زیر مقدار padding را در th ، مقدار 10 پیکسل و در td مقدار 15 پیکسل قرار دادیم.
|
<html>
<head>
<style>
table, td, th
{
border:1px solid black;
}
th
{
padding:10px;
}
td
{
padding:15px;
}
</style>
</head>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>City</th>
</tr>
<tr>
<td>Fatemeh</td>
<td>Ahmadi</td>
<td>Shiraz</td>
</tr>
<tr>
<td>Maryam</td>
<td>Rezaei</td>
<td>Mashhad</td>
</tr>
<tr>
</table>
</body>
</html>
|
در مثال زیر رنگ border جدول، رنگ متن عنصر th با مشخصه color، و رنگ پس زمینه عناصر th و td را با مشخصه background-color تعیین کردیم.
|
<html>
<head>
<style>
table, td, th
{
border:1px solid green;
}
th
{
background-color:green;
color:white;
}
td
{
background-color:#D9FFD9;
}
</style>
</head>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>City</th>
</tr>
<tr>
<td>Zahra</td>
<td>Mohammadi</td>
<td>Tehran</td>
</tr>
<tr>
<td>Masoomeh</td>
<td>Alizadeh</td>
<td>Shiraz</td>
</tr>
<tr>
<td>Fatemeh</td>
<td>Ahmadi</td>
<td>Tabriz</td>
</tr>
</table>
</body>
</html>
|
 |