تگ جدول < table > :

این تگ برای ایجاد جدول ها در صفحه استفاده می شود . به طور کلی جدول ها به ۲ منظور ایجاد می شوند :

ایجاد یک جدول معمولی با تعدادی خانه ، برای نمایش مطالب مورد نظر در سطرها و ستون های جدا از هم .
تقسیم فضای صفحه با استفاده از چهارچوب جدول ها برای منظم چیدن محتویات صفحه . به طور مثال مطالب این صفحه در تعدادی خانه جدول مرتب شده است . در این حالت می توان با عدم تعیین حاشیه ( border ) برای خانه های جدول ، از چهارچوب جدول ها استفاده کرد در حالی که آنها عملا از دید کاربر مخفی هستند .

جدول ها برای هر منظوری به کار روند ، باید با استفاده از تگ < table > ایجاد شوند . هر جدول مجموعه ای از سطرها و ستون هاست . برای ایجاد یک سطر جدید از یک تگ < tr > استفاده می شود که هر خانه ( ستون ) درون سطر هم توسط یک تگ < td > مشخص می شود .
الگوریتم طراحی جدول :

در طراحی جدول باید به نکات زیر دقت کرد :

در هنگام ایجاد یک سطر یا استفاده از تگ < tr > ، قبل از ایجاد سطر جدید حتما باید تگ  < tr > قبلی بسته شود و در هر سطر نیز باید در صورت ایجاد هر خانه با تگ  < td > قبل از ایجاد یک خانه جدید باید تگ < td > قبلی بسته شود .
درون تگ < table > فقط می توان تگ < tr > و درون تگ < tr > نیز فقط می توان از تگ < td > استفاده کرد .
خانه هاو سطرهای یک جدول منظم و مرتب هستند . به عبارت دیگر به طور مثال نمی توان  در یک سطر جدول ۳ خانه و در سطر پایینی آن ۲ خانه با پهناهای متفاوت ایجاد کرد . در چنین مواردی باید با استفاده از خاصیت colspan در تگ < td > سطر با خانه کمتر و استفاده از تکنیک جدول های تو در تو این مسئله را بر طرف کرد .

جدول های تو در تو : می توان در درون یک جدول ، جدول های دیگری نیز ایجاد کرد . در این حالت جدول درونی همانند یک خانه جدول بیرونی خواهد بود . جدول درونی را باید در یک تگ < td > جدول بیرونی ایجاد کرد . در این حالت چیدمان خانه های جدول درونی به چیدمان خانه های جدول بیرونی ارتباطی ندارند .

مثال : تمام موارد ذکر شده را در مثال زیر بررسی می کنیم :

 < table cellpadding =”5″ cellspacing =”0″ style =”border :solid 2px blue; width:100%” >
< tr >
< td class =”header” colspan =”2″ >
Header
< /td >
< /tr >
< tr >
< td class =”body” >
Body 1
< /td >
< td >
Body 2
< /td >
< /tr >
< tr >
< td class =”body” colspan =”2″ style =”padding :0″ >
< table cellpadding =”5″ cellspacing=”0″ style =”width :100% ” >
< tr >
< td style =”border :solid 1px green ” >
C1
< /td >
< td style =”border :solid 1px green ” >
C2
< /td >
< td style =”border :solid 1px green ” >
C3
< /td >
< /tr >
< tr >
< td style =”border :solid 1px green ” >
C4
< /td >
< td style =”border :solid 1px green ” >
C5
< /td >
< td style =”border :solid 1px green ” >
C6
< /td >
< /tr >
< /table >
< /td >
< /tr >
< /table >