رسم جدول در html
در html با استفاده از تگ < tabel > میتوانیم جداولی را بسازیم. معمولا ساخت جدول در نظر عموم طراحان وب کار ساده ای به نظر نمیرسد ولی اگر تا انتها این آموزش را دنبال کنید خواهید دید که رسم جدول کار چندان پیچیده ای نیست. دلیل سخت به نظر رسیدن رسم جدول یادگیری غیر اصولی استفاده از تگ های آن می باشد.
در سال های اخیر طراحان وب صفحات html خود را با رسم جدول طراحی میکردند یعنی کل ساختار صفحه را یک جدول در نظر میگرفتند و با استفاده از سطر و ستون ها به صفحه ی خود شکل میدادند. برای مثال هیدر صفحه html خود را یک ردیف از جدول خود تعریف میکردند و بخش های پایین تر را نیز با استفاده از سطر بندی و ستون بندی مناسب شکل دلخواه خود را به وجود می آوردند.
این روش در طراحی صفحات وب به هیچ وجه توصیه نمی شود زیرا وب سایت شما را از لحاظ سئو و موتور های جستجوگر در سطح کیفی پایین تری قرار میدهد.
به طور کلی میتوانیم برای نمایش یک لیست و یا نمایش یک آمار و … از جدول استفاده کنیم.
ایجاد جدول با تگ table
این تگ در صفحه ی html یک جدول را تعریف میکند و با استفاده از تگ های td , tr , th میتوانیم به جدول تعریف شده ی خود سطر و ستون هایی را اعمال کنیم.
مثال زیر یک جدول بسیار ساده را نشان می دهد.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 10px;
text-align: right;
}
</style>
</head>
<body>
<table>
<tr>
<th>تیتر شماره یک</th>
<th>تیتر شماره دو</th>
<th>تیتر شماره سه</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
کد بالا جدول زیر را به نمایش در می آورد:
| تیتر شماره ۱ | تیتر شماره ۲ | تیتر شماره ۳ |
|---|---|---|
تگ tr سطر جدول ما را تعریف میکند و برای هر سطر باید از این تگ استفاده کنیم. همانطور که در مثال بالا میبینید جدول ما ۳ سطر دارد و ما سه بار از المنت tr استفاده کردیم.
تگ th سرتیتر های جدول ما را تعریف میکند. در مثال بالا ،داخل تگ سطر اول، سه بار از تگ th استفاده کرده ایم.
تگ td اطلاعات داخل جدول را بیان میکند که ما در مثال بالا برای هر سطر، سه بار از این تگ استفاده کرده ایم.
توجه داشته باشید که ما برای اینکه شمای کلی جدولمان شبیه با جدول تصور شده در ذهن عموم باشد برای هر یک از تگ های tr , td , th , table یک حاشیه در نظر گرفته ایم که در قالب خطوطی سیاه تگ های مورد استفاده در جدول را از هم جدا میکند. این عمل را با کمک css انجام دادیم و برای هر یک از تگ های خاصیت border را اضافه کردیم.
