ایجاد جداول و ستون در HTML

جداول HTML

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

ما در طراحی وب به راحتی میتوانیم از جداول استفاده و آن ها را ایجاد کنیم که در ادامه نحوه ایجاد کردن آن را خواهید دید.

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

 

تعریف یک جدول HTML

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

عناوین (سرتیتر) جدول توسط تگ <th> تعریف شده و به صورت پیشفرض عناوین جدول به صورت بولد و وسط چین هستند.

در زیر یک مثال جامع از جداول html را برایتان آماده کردیم و در ادامه مطالب  آموزش هر قسمت(ردیف،ستون،سرتیتر) را بصورت جداگانه برایتان قرار داده ایم.

مثال

<table>
 <tr>
 <th>Company</th>
 <th>Contact</th>
 <th>Country</th>
 </tr>
 <tr>
 <td>Alfreds Futterkiste</td>
 <td>Maria Anders</td>
 <td>Germany</td>
 </tr>
 <tr>
 <td>Centro comercial Moctezuma</td>
 <td>Francisco Chang</td>
 <td>Mexico</td>
 </tr>
</table>

نتیجه

سلول جدول در HTML

هر سلول جدول با برچسب <td> و </td> تعریف شده است.td مخفف data table است.

هرچیز که بین <td> و </td> محتوای سلول جدول است.

مثال

<!DOCTYPE html>
<html>
<style>
table, th, td {
 border:1px solid black;
}
</style>
<body>
<h2>عناصر td سلول های جدول را تعریف می کنند</h2>
<table style="width:100%">
 <tr>
 <td>Emil</td>
 <td>Tobias</td>
 <td>Linus</td>
 </tr>
</table>
<p>.برای درک بهتر مثال ، حاشیه ها را به جدول اضافه کرده ایم</p>
</body>
</html>

نتیجه

ردیف های جدول در HTML

tr مخفف  table row(ردیف جدول)  است.هر سطر جدول با یک <tr> شروع می شود و با یک برچسب </tr> خاتمه می یابد.

مثال

<!DOCTYPE html>
<html>
<style>
table, th, td {
 border:1px solid black;
}
</style>
<body>
<h2>عناصر TR سطرهای جدول را تعریف می کنند</h2>
<table style="width:100%">
 <tr>
 <td>Emil</td>
 <td>Tobias</td>
 <td>Linus</td>
 </tr>
 <tr>
 <td>16</td>
 <td>14</td>
 <td>10</td>
 </tr>
</table>
<p>برای درک بهتر مثال ، حاشیه ها را به جدول اضافه کرده ایم.</p>
</body>
</html>

نتیجه

 

سربرگ های جدول در HTML

گاهی اوقات می خواهید سلول های شما سربرگ باشند ، در این موارد از تگ <th> به جای تگ <td> استفاده کنید.

مثال

<!DOCTYPE html>
<html>
<style>
table, th, td {
 border:1px solid black;
}
</style>
<body>
<h2>عناصر TH سرتیتر های جدول را تعریف می کنند</h2>
<table style="width:100%">
 <tr>
 <th>Person 1</th>
 <th>Person 2</th>
 <th>Person 3</th>
 </tr>
 <tr>
 <td>Emil</td>
 <td>Tobias</td>
 <td>Linus</td>
 </tr>
 <tr>
 <td>16</td>
 <td>14</td>
 <td>10</td>
 </tr>
</table>
</body>
</html>

نتیجه