زیباسازی جدول با css

یکی از موارد کاربردی در طراحی قالب ، جداول هستند. معمولا در بیشتر پروژه ها از جدول استفاده می شود. معمولا جداولی که با html طراحی می شود بسیار بی روح و خشک می باشد.

برای اینکه جدول را زیباتر کنیم از css یا استایل ها بهره می بریم.

با سی اس اس (css) می توان واقعا جدول را زیبا کرد. می توانیم رنگ جدول را تغییر دهیم. فونت آن را تغییر دهیم. ازpadding,marginاستفاده کنیم و فاصله هایی ایجاد کنیم تا متن به کادر نچسبد و با دستور margin فاصله بیرونی ایجاد کنیم.

در کل سی اس اس (css) در زیبایی تمامی عناصر html تاثیرگذار است. بدون استایل ها قالب هیچ جذابیتی ندارد.

جدول می تواند استایل مختلفی داشته باشد. با هم بررسی می کنیم.

border در جدول

در مثال زیر یک border را برای جدول مشخص کردیم.

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td { border: 1px solid black; }
</style>
</head>
<body>
<h2>sh711.com Add a border to a table:</h2>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
</body>
</html>

border-collapse

با ویژگی border-collapseمی توانیم مشخص کنیم که خطوط اضافی حذف شود. خطوطی که مابین ستون ها و سطرها می باشد. در مثال زیر ببینید.

width , height

می توانیم عرض و ارتفاع را مشخص نماییم.

ویژگی text-alignدر جدول

می توانیم مشخص کنیم محتوا در کدام قسمت باکس ها قرار بگیرند.ویژگی text-align دارای حالت راست چین ، وسط چین ، چپ چین و justify می باشد.

<!DOCTYPE html>
<html>
<head>
<style>
table { border-collapse: collapse; width: 100%; }
table, td, th { border: 1px solid black; }
th{ height: 60px; color: brown; background-color: burlywood; }
td{ text-align: center; }
</style>
</head>
<body>
<h2>Let the borders collapse:</h2>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
</body>
</html>

ویژگی vertical-align

می توانیم مشخص کنیم که محتوا در کدام قسمت باکس قرار بگیرند. مثال را ببینید.

متن ها در td در بالا قرار می گیرد و th در وسط قرار می گیرد.

<!DOCTYPE html>
<html>
<head>
<style>
table, td, th { border: 1px solid black; }
table { border-collapse: collapse; width: 100%; }
td { height: 50px; vertical-align: top; }
th{ height: 60px; vertical-align: middle; text-align: left; }
</style>
</head>
<body>
<h2>The vertical-align Property</h2>
<p>This property sets the vertical alignment (like top, bottom, or middle) of the content in th or td.</p>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html>

نویسنده : هدایت عباسی

تگ ها : آموزش css
ثبت نظر