آموزش ایجاد جدول در html
یکی از موارد بسیار کاربردی، در بحث طراحی وب جداول هستند در اوایل از جدول به منظور قالب بندی صفحات استفاده می کردند اما آن بدلیل مشکلاتی که داشت منسوخ شد و جای خود را به تگ div با کدهای css داد.
در جلسه گذشته یاد گرفتید که html چیست و چه کاربردی دارد. در این جلسه هم می خواهیم با ایجاد یک جدول در html آشنا شویم
برای شروع کارنیاز به یک فایل html داریم و با پسوند htm یا html باید آن را ذخیره کنیم. برای این منظور می توانید از Notpad,Notpad++ و نرم افزار DreamWaver استفاده کنید ما در این پروژه از DreamWaver استفاده کردیم
برای شروع کار ابتدا باید با تگ های زیر آشنا باشید
تگ های اولیه یک فایل html
تک html
این تگ اولین تگ از html است و در ادامه خواهید دید که تمامی تگ داخل این تگ قرار دارند در واقع من آن را مشخصه یک فایل html می نامم
تگ head
داخل این تگ، تگ هایی مانند <meta> قرار می گیرند که دربردارنده اطلاعات کلی درباره سند هستند
تگ body
این تگ اصلی ترین تگ یک پروژه html نام دارد در واقع بدنه کلی سایت در داخل آن قرار می گیرد
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>عنوان صفحه</title>
</head>
<body>
بدنه
</body>
</html>بنابراین کار ما فعلا در داخل body صفحه وب است
جدول در html
یک جدول دارای سطر و ستون است پس بنابراین برای ایجاد جدول در html به تگ های زیر نیاز خواهیم داشت
| ردیف | نام تگ | کاربرد |
| 1 | <table> | اولین تگ برای شروع ساخت یک جدول در html می باشد |
| 2 | <tr> | برای ایجاد یک سطر در جدول می باشد |
| 3 | <th> | برای ایجاد سرتیتر جدول کاربرد دارد |
| 4 | <td> | برای ایجاد یک سلول از این تگ استفاده می شود |
| 5 | <caption> | برای ایجاد سرعنوان |
| 6 | <col>,<colgroup> | برای گروه بندی جدول مورد استفاده قرار می گیرد |
| 7 | <tfoot>,<thead>,<tbody> | برای فرمت بندی جداول کاربرد دارند |
فعلاً ما در این آموزش از تگ شماره 1 تا 4 را ارئه می کنیم به مثال زیر توجه کنید
فعلا کد بالا را اجرا کرده و تمرین کنید در جلسات آینده بصورت پیشرفته با جدول کار خواهیم کرد فقط یک نکته یک خصیصه ای در داخل تگ tableتعریف شده که منظور، میزان ضخامت خطوط جدول است برای اینکه بهتر متوجه شوید یکبار این کد را حذف کنید و جدول را اجرا کنید تا متوجه قضیه شوید
<table border="1px"> <tr> <th>عنوان 1</th> <th>عنوان 2</th> <th>عنوان 2</th> </tr> <tr> <td>سول 1 ستون 1</td> <td>سول 1 ستون 2</td> <td>سول 1 ستون 3</td> </tr> <tr> <td>سلول 2 ستون 1</td> <td>سلول 2 ستون 2</td> <td>سلول 2 ستون 3</td> </tr> </table>
دیدگاهتان را بنویسید