تعریف یک جدول در HTML
در HTML جداول با استفاده از تگ <table> تعریف میشوند.
هر رکورد از جدول با استفاده از تگ <tr> تعریف میشود.
عناوین (سرتیتر) جدول توسط تگ <th> تعریف شده و به صورت پیشفرض عناوین جدول به صورت بولد و وسط چین هستند.
سلول های(خانه هایی که داده در آن قرار میگیرد) جداول توسط تگ <td> تعریف میشود.
<"table style =" width :100% >
<tr >
<th >Firstname </th >
<th >Lastname </th >
<th >Age </th >
<tr/ >
<tr >
<td >Jill </td >
<td >Smith </td >
<td >50 </td >
<tr/ >
<tr >
<td >Eve </td >
<td >Jackson </td >
<td >94 </td >
<tr/ >
<table/ >
نکته : عناصر <td> مکان هایی هستند که داده های جدول در آن قرار میگیرند. آنها میتوانند شامل هر عنصری از HTML اعم از متن، عکس، لیست، جدول و .... باشند
اضافه کردن border به جدول
اگر شما برای جدول border مشخص نکنید، آن بدون بدون خط دور نمایش داده میشود.
خط دور با استفاده از خاصیت border در CSS تعریف میشود :
} table, th, td
;border : 1px solid black
{
به خاطر داشته باشید که border را هم برای جدول و هم سلول های آن تعریف کنید(همانند مثال قبل)
خاصیت border-collapse در جداول
همانطور که در امتحان کنید مثال قبل دیدید تعریف خط دور برای جداول و سلول ها باعث ایجاد خطوط جداگانه ای برای هم جدول و هم سلول ها میشود. در این صورت خطوط به صورت دوبل مشاهده میشود. برای حل این مشکل میتوان از خاصیت border-collapse در CSS کمک گرفت :
} table, th, td
;border : 1px solid black
;border-collapse : collapse
{
اضافه کردن padding به سلول های جدول
Padding در سلول همان فضای بین محتوای سلول و خط دور آن است.
اگر شما padding را برای سلول ها مشخص نکنید آنها بدون padding نمایش داده میشوند.
برای مقداردهی padding از خاصیت padding در CSS استفاده میکنیم.
}th, td
;padding : 15px
{
ترازبندی سرتیتر ها در جداول
به صورت پیشفرض سرتیتر ها در جداول بولد و وسط چین هستند.
برای تراز بندی متون در سرتیتر ها از خاصیت text-align در CSS استفاده میکنیم.
} th
;text-align : left
{
نکته : ترازبندی متون در سلول های td نیز همانند ترازبندی سرتیتر هاست.
استفاده از border-spacing در جداول
border-spacing فضای بین سلول ها در جداول را مشخص میکند.
}table
; border-spacing : 5px
{
نکته : اگر از خاصیت border-collapse در جدول استفاده کرده باشید، تنظیم border-spacing هیچ اثری در خروجی نخواهد داشت.
استفاده از صفت colspan در جداول
اگر قرار باشد سلول خاصی بیش از فضای یک ستون را اشغال کند از صفت colspan استفاده میکنیم :
<"table style =" width :100% >
<tr >
<th >Name </th >
<th colspan = "2 " >Telephone </th >
<tr/ >
<tr >
<td >Bill Gates </td >
<td >55577854 </td >
<td >55577855 </td >
<tr/ >
<table />
استفاده از صفت rowspan در جداول
اگر قرار باشد سلول خاصی بیش از فضای یک ردیف را اشغال کند از صفت rowspan استفاده میکنیم :
<"table style =" width :100% >
<tr >
<th >Name: </th >
<td >Bill Gates </td >
<tr/ >
<tr >
<th rowspan = "2 " >Telephone: </th >
<td >55577854 </td >
<tr/ >
<tr >
<td >55577855 </td >
<tr />
<table />
اضافه کردن caption به جدول
برای اضافه کردن عنوان به جدول از تگ <caption> استفاده کنید :
<"table style =" width :100% >
<caption >Monthly savings </caption >
<tr >
<th >Month </th >
<th >Savings </th >
<tr/ >
<tr >
<td >January </td >
<td >$100 </td >
<tr/ >
<tr >
<td >February </td >
<td >$50 </td >
<tr/ >
<table />
نکته : تگ <caption> باید بلافاصله بعد از تگ <table> قرار بگیرد.
یک استایل خاص برای یک جدول
برای تعریف یک استایل خاص برای جدولی مشخص از صفت id برای جدول استفاده کنید :
<"table id = "t01 >
<tr >
<th >Firstname </th >
<th >Lastname </th >
<th >Age </th >
<tr/ >
<tr >
<td >Eve </td >
<td >Jackson </td >
<td >94 </td >
<tr />
<table />
اکنون میتوانیم یک استایل خاص برای این جدول ایجاد کنیم :
} table#t01
;width : 100%
;background-color : #f1f1c1
{
چند استایل دیگر برای جدول :
}table#t01 tr:nth-child(even)
;background-color : #eee
{
}table#t01 tr:nth-child(odd)
;background-color : #fff
{
}table#t01 th
;color : white
;background-color : black
{
خلاصه کلام :
- از عنصر <table> برای تعریف جدول استفاده کنید
- از عنصر <tr> برای تعریف ردیف های جدول استفاده کنید
- از عنصر <td> برای تعریف داده های جدول استفاده کنید
- از عنصر <th> برای تعریف سرتیتر های جدول استفاده کنید
- از عنصر <caption> برای تعریف عنوان جدول استفاده کنید
- از خاصیت border در CSS برای تعریف خط دور در جدول استفاده کنید.
- از خاصیت border-collapse در CSS برای از بین بردن خط دورهای دوتایی استفاده کنید.
- از خاصیت padding برای اضافه کردن فضا به سلول ها استفاده کنید.
- از خاصیت text-align در CSS برای ترازبندی متن در سلول ها استفاده کنید.
- از خاصیت border-spacing در CSS برای تنظیم فضای بین سلولی استفاده کنید.
- از صفت colspan برای زمانی که سلول خاصی بیش از فضای یک ستون را اشغال میکند استفاده کنید.
- از صفت rowspan برای زمانی که سلول خاصی بیش از فضای یک ردیف را اشغال میکند استفاده کنید.
- از صفت id برای تعریف یک جدول منحصر به فرد استفاده کنید.