جداول در HTML (جلسه هفتم)

با عرض سلام و خداقوت به دوستان و همراهان مِستر آموز.

 

این جلسه را می خواهیم به جداول در HTML اختصاص بدیم. از جداول برای مرتب کردن محتویات و کنار هم قرار دادن چند فایل اعم از تصویر ، متن ، یک جدول دیگر و … استفاده می شود. با ما همراه باشید.

 

جداول در HTML

جدول ها در HTML توسط تگ <table> ایجاد می شوند. و توسط تگ <tr> به سطرها تقسیم می شود و هر سطر با استفاده از تگ <td> به خانه های اطلاعاتی تقسیم می شوند. یک خانه اطلاعاتی می تواند شامل متن، تصویر ، فهرست ، پاراگراف ، فرم ، یک جدول دیگر و یا هر چیز دیگری باشد.

مثال زیر یک جدول حاشیه دار می باشد که ضخامت حاشیه توسط مشخصه “border=”1 تعیین شده است.

<table border="1">
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
     </tr>
</table>

خروجی:

 

مشخصه border:

اگر شما مشخصه border را تعیین نکنید جدول شما حاشیه نخواهد داشت. بعضی وقت ها برای طرح بندی به صفحه وب جدول بدون حاشیه مفید است ولی اغلب اوقات می خواهید جدولتان حاشیه داشته باشد. برای نمایش جدولی با حاشیه باید از border استفاده کنیم. همانند جدول بالا.

مثال: جدول بدون حاشیه، کافیست از کد بالا مشخصه border را حذف کنیم:

<table>
	<tr>
		<td>row 1, cell 1</td>
		<td>row 1, cell 2</td>
	</tr>
	<tr>
		<td>row 2, cell 1</td>
		<td>row 2, cell 2</td>
	</tr>
</table>

خروجی:

 

عنوان ها در جدول:

عناوین ستون ها در جدول توسط برچسب <th> مشخص می شوندو به مثال زیر توجه کنید:

توسط برچسب <caption>  هم می توانید عنوانی برای جدول خود در نظر بگیرید.

<table border="1">
	<caption>Caption</caption>
	<tr>
		<th>Heading</th>
		<th>Another Heading</th>
	</tr>
	<tr>
		<td>row 1, cell 1</td>
		<td>row 1, cell 2</td>
	</tr>
	<tr>
		<td>row 2, cell 1</td>
		<td>row 2, cell 2</td>
	</tr>
<table/>

خروجی:

مشخصه colspan:

برای ترکیب چند ستون با هم و ایجاد یک ستون بزرگتر استفاده می شود.

<table border="1">
	<tr>
		<th>Name</th>
		<th colspan="2">Telephone</th>
	</tr>
	<tr>
		<td>WebAmooz</td>
		<td>555 77 854</td>
		<td>555 77 855</td>
	</tr>
</table>

خروجی:

مشخصه RowSpan:

برای ترکیب چند سطر با هم و ایجاد یک سطر بزرگتر استفاده می شود.

<table border="1">
	<tr>
		<th>First Name:</th>
		<td>WebAmooz</td>
	</tr>
	<tr>
		<th rowspan="2">Telephone:</th>
		<td>555 77 854</td>
	</tr>
	<tr>
		<td>555 77 855</td>
	</tr>
</table>

خروجی:

مشخصه cellpadding:

این مشخصه فضای هر خانه را بیشتر میکند.

<table border="1" cellpadding="20">
	<tr>
		<td>row 1, cell 1</td>
		<td>row 1, cell 2</td>
	</tr>
	<tr>
		<td>row 2, cell 1</td>
		<td>row 2, cell 2</td>
	</tr>
</table>

خروجی:

مشخصه cellspacing:

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

<table border="1" cellspacing="10">
	<tr>
		<td>row 1, cell 1</td>
		<td>row 1, cell 2</td>
	</tr>
	<tr>
		<td>row 2, cell 1</td>
		<td>row 2, cell 2</td>
	</tr>
</table>

خروجی:

 

 

چند مشخصه دیگر برای طراحی جدول دلخواه:

Bgcolor: می توانید رنگ زمینه کل جدول یا خانه مورد نظر خود را تعیین کنید.

Width: این مشخصه برای تعیین عرض کل جدول یا خانه مورد نظر استفاده می شود

Height: با استفاده از این مشخصه ارتفاع جدول یا یک خانه تعیین می گردد. (مقدار این مشخصه و مشخصه width معمولا برحسب pixel می باشد.)

Background: با این مشخصه میتوانید تصویری را برای پس زمینه جدول یا خانه مورد نظر تعیین کنید.

Align: برای مرتب کردن محتویات خانه های یک جدول در جهت افقی استفاده می شود که مثلا در سمت راست ، وسط و یا سمت چپ قرار بگیرند. و اگر محتویات خانه متن باشه می توان از justify برای تراز لبه های متن استفاده کرد.

Valign: با استفاده از این مشخصه می توان محتویات خانه های بک جدول را در جهت عمودی مرتب کرد.

Frame: مشخصه دیگری که در جدول ها کاربرد دارد و دارای مقادیر زیر است

 

مقدار	شرح
Border	اگر مشخصه border ذکر نشده باشد فقط یک حاشیه دور جدول رسم میکند.
Box	اگر مشخصه border ذکر نشده باشد فقط یک حاشیه دور جدول می کشد.
Void	خطوط جدول را نمایش نمی دهد.
Above	فقط خط بالای جدول را کامل نشان می دهد.
Below	فقط خط پایین جدول را کامل نشان می دهد.
hsides	فقط خطوط بالا و پایین جدول را نشان می دهد.
Vsides	فقط خطوط سمت چپ و راست جدول را کامل نشان می دهد.
Lhs	فقط خط سمت چپ جدول را نشان می دهد.
Rhs	فقط خط سمت راست جدول را کامل نشان میدهد.

 

 

تگ های <tfoot> , <tbody> و <thead>:

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

تگ <thead> برای ایجاد و دسته بندی سطر سرعنوان (Header) استفاده می شود.

تگ <tbody> شامل محتویات و بدنه اصلی جدول می باشد.

تگ <tfoot> هم برای عنوان انتهایی جدول مورد استفاده قرار میگیرد.

نکته: هر یک از تگ های فوق فقط درون تگ <table> قابل استفاده می باشند و حتما باید دارای حداقل یک تگ <tr> باشند.

نکته: در هنگام نوشتن و استفاده از این تگ ها، باید به ترتیب قرار گیری دقت کنید. به ترتیب شکل زیر

1- <thead>

2-<tbody>

3<tfoot>

 

مثال:

<table border="1" width = "400px" >
	<thead>
    	<tr>
      		<td>
        		This text is in the THEAD
     		</td>
    	</tr>
  	</thead> 
  	<tbody >
    	<tr >
      		<td >
        		This text is in the TBODY
     		</td >
    	</tr>
  	</tbody>
  	<tfoot >
    	<tr >
      		<td >
        		This text is in the TFOOT
      		</td >
    	</tr>
  	</tfoot> 
</table >

خروجی:

موفق و پیروز باشید.