آموزش کامل HTML - قسمت هفتم


با سلام خدمت دوستان و همراهان همیشگی زُلند .

توی قسمت هفتم آموزش میخوایم با جداول در HTML آشنا بشیم.

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

به مثال زیر دقت کنید :

<table>
<tr>
<td>FirstName</td>
<td>LastName</td>
</tr>
<tr>
<td>Mostafa</td>
<td>Asadi</td>
</tr>
</table>

خب ما دوتا سطر و دوتا ستون ایجاد کردیم و داخل سطر اول عنوان جدول و داخل سطر دوم مشخصات رو وارد کردیم اما اگه کد بالا رو اجرا کرده باشین میبینید که جدول ما کادر مشخصی نداره! برای اینکه جدول ما یه کادر داشته باشه باید به تگ <table> خاصیت border رو بدیم و مقدار اون رو برابر یک مقدار عددی قرار بدیم که ما اینجا عدد 1 رو میدیم وحتی به جدول خودمون یه عرض یا ارتفاع بدیم به این صورت :

<table border=”1” style=”width:200px:”>
<tr>
<td>FirstName</td>
<td>LastName</td>
</tr>
<tr>
<td>Mostafa</td>
<td>Asadi</td>
</tr>

<tr>
<td>Keyvan</td>
<td>Gholami</td>
</tr>
</table>

خب توی مثال بالا لبه های خط جدول شما بصورت دوتا خط هستن اگه بخواین اونا رو به لبه های یک خطی تبدیل کنید میتونید از خصوصیات CSS استفاده کنید که جلسه قبل روش استفاده رو گفتیم به این صورت :

<head>

<style>

Table,tr,td{

Border:1px solid black;

Border-collapse:collapse;

}

</style>

</head>

خب ما اینجا توی CSS تعریف کردیم که تگ های tr,td,table دارای یک border یا کادر باشن به میزان 1 پیکسل و از نوع خط ساده و مشکی. و در خاصیت بعدی بهش گفتیم که بصورت تک خطی باشه.

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

برای ایجاد تیتر و عنوان جدول ها باید اونارو بجای <td> داخل <th> قرار بدیم به این صورت :

 

<table>
<tr>
<th>FirstName</th>
<th>LastName</th>
</tr>
<tr>
<td>Mostafa</td>
<td>Asadi</td>
</tr>
</table>

 

ادامه آموزش هارو در قسمت هشتم بخونید

 

این نوشته اختصاصی وب سایت زولند بوده و هرگونه کپی برداری ممنوع بوده و پیگری میگردد.
مصطفی اسدی

In programmers world anything is possible !

5 امتیاز 10 نوشته

این نوشته را با دوستان خود به اشتراک بگذارید...

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