در این قسمت از آموزش HTML نحوه کار با جدول در html را به شما آموزش خواهیم داد و شما می توانید در ادامه فیلم مربوط به ساخت جدول را مشاهده بکنید :
جدول در html
برای نشون دادن اطلاعات به صورت جدول در صفحات وب از تگ جدول ( Table ) استفاده می کنیم ، تگ Table به صورت زیر استفاده می شود و داری دو تا زیر تگ به نام های <tr> و <td> هستش :
<html> <head> <title> Web30ty </title> </head> <body> <table> <tr> <td> </td> </tr> </table> </body> </html>
در کد بالا تگ <tr> برای سطر های جدول ( Table ) به کار میره و تگ <td> برای ستون بندی جدول به کار میره ، یک جدول حداقل باید یدونه تگ <tr> و تگ <td> رو داشته باشه ، اگه کدهای بالا رو اجرا کنید تو مرورگر به شما چیزی رو نون نمیده چون هنوز ما داخل Table چیزی ننوشته ایم .
شناسه Border در tabel
وقتی در داخل تگ Table از این شناسه استفاده می کنیم به کل جدول یه حاشیه ایی رو به اندازه ایی که تعیین کرده ایم اختصاص میده .
شناسه Width و Height در جدول
اگر از این شناسه استفاده نکنید Table به اندازه مقادیرش طول و عرض می گیرد ، ولی با استفاده از این شناسه ها می توانیم اندازه دلخواه خودمان رو برای Table در نظر بگیریم .
<html> <head> <title> Web30ty </title> </head> <body> <table width="500" height="400" border="2" bgcolor="#ff0000" > <tr> <td>cell 1</td> <td>cell 2</td> </tr> <tr> <td align="center">cell 3</td> <td>cell 4</td> </tr> </table> </body> </html>
شناسه bgcolor
اگر کد بالا رو اجرا کنید خواهید دید که رنگ جدول قرمز هستش این به خاطر شناسه bgcolor هست که در تگ Table نوشته ایم ، این شناسه رنگ پس زمینه رو مشخص می کند . اگر این شناسه رو در تگ <td> استفاده کنید فقط رنگ پس زمینه اون قسمت Table تغییر خواهد کرد .
شناسه Align در جدول
اگر کد بالا رو اجرا کنید و نتیجه رو ببینید خواهید دید که نوشته Cell 3 در وسط نوشته شده است ولی بقیه Cell ها اینطوری نیستند ، این به اینکه ما در تگ <td> از شناسه align استفاده کرده ایم و مقدار آن را برابر center قرار داده ایم .
شناسه BorderColor در جدول
این شناسه رنگ border یا حاشیه جدول رو مشخص می کنه .
تگ <th> در Tabel
این تگ برای مشخص کردن عنوان ستون ها استفاده می شود . در سورس کد زیر همه کدهایی که گقتم رو نوشته ام :
<html> <head> <title> Web30ty </title> </head> <body> <table width="500" border="5" bordercolor="#0f0" > <tr> <th>عنوان اول</th> <th>عنوان دوم</th> </tr> <tr> <td align="center" bgcolor="#f00"> <h1>cell 1</h1> </td> <td> <h1>cell 2</h1> </td align="center" bgcolor="#0f0"> </tr> <tr> <td align="center" bgcolor="#00f"> <h1>cell 3</h1> </td> <td align="center" bgcolor="#0ff"> <h1>cell 4</h1> </td> </tr> </table> </body> </html>
در قسمت بعد جدول در html رو ادامه می دیم .
