مشخصات CSS امکانات نامحدودی را برای طراحی جداول می دهد. به طور پیش فرض، سلول های جدول و جدول هیچ حاشیه یا پس زمینه قابل مشاهده ای ندارند و سلول های داخل جدول مجاور یکدیگر نیستند.

عرض سلول های جدول با عرض محتوای آنها تعیین می شود، بنابراین عرض ستون های جدول می تواند متفاوت باشد. ارتفاع تمام سلول ها در یک ردیف یکسان است و با ارتفاع بالاترین سلول تعیین می شود.

قالب بندی جداول

1. حاشیه میز

به طور پیش فرض، جدول و سلول های داخل آن در مرورگر بدون حاشیه قابل مشاهده نمایش داده می شوند. حاشیه جدولتوسط ویژگی مرزی مشخص می شوند:

جدول ( border-collapse: collapse; /*remove فضاهای خالیبین سلول*/ حاشیه: 1px خاکستری جامد. /*یک مرز بیرونی برای جدول تعیین کنید خاکستریضخامت 1px*/ )

مرزهای سلول سرصفحههر ستون برای عنصر ام مشخص شده است:

Th (حاشیه: 1px خاکستری یکدست؛)

مرزهای سلولیبدنه جدول برای عنصر td مشخص شده است:

Td (حاشیه: 1px خاکستری جامد؛)

ضخامت مرزهای سلول های مجاور دو برابر نمی شود، بنابراین می توانید برای کل جدول به روش زیر مرزها را تعیین کنید:

Th, td (حاشیه: 1px خاکستری یکدست؛)

می توانید حاشیه بیرونی جدول را با افزایش عرض آن برجسته کنید:

جدول (حاشیه: 3px خاکستری یکدست؛)

مرزها را می توان تا حدی تنظیم کرد:

/* یک حاشیه بیرونی خاکستری با ضخامت 3 پیکسل برای جدول تنظیم کنید */ جدول (حاشیه بالای: 3 پیکسل خاکستری یکدست؛ ) /* یک حاشیه خاکستری با ضخامت 1 پیکسل برای سلول بدنه جدول تنظیم کنید */ td (حاشیه-پایین: 1 پیکسل جامد خاکستری ؛)

می توانید در مورد ملک مرزی بیشتر بخوانید.

2. نحوه تنظیم عرض و ارتفاع جدول

پیش فرض عرض و ارتفاع میزتوسط محتویات سلول های آن تعیین می شود. اگر عرض مشخص نشده باشد، برابر با عرض پهن ترین ردیف (ردیف) خواهد بود.

عرض جدول و ستونبا استفاده مشخص شده است ویژگی های عرض. اگر جدول (عرض: 100%؛) برای یک جدول مشخص شده باشد، عرض جدول برابر با عرض بلوک ظرفی است که در آن قرار دارد.

عرض جدول و ستون‌ها معمولاً بر حسب px یا % مشخص می‌شود، برای مثال:

جدول (عرض: 600 پیکسل؛) هفتم (عرض: 20 درصد؛) td:فرزند اول (عرض: 30 درصد؛)

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

Th, td (بالشتک: 10px 15px؛)

3. نحوه تنظیم پس زمینه جدول

پیش فرض پس زمینه جدولو سلول ها شفاف هستند. اگر صفحه یا بلوک حاوی جدول دارای پس‌زمینه باشد، از طریق جدول نشان داده می‌شود. اگر پس‌زمینه هم برای جدول و هم برای سلول‌ها مشخص شده باشد، در مکان‌هایی که پس‌زمینه جدول و سلول‌ها همپوشانی دارند، فقط پس‌زمینه سلول‌ها قابل مشاهده است. پس زمینه جدول به عنوان یک کل و سلول های آن می تواند به صورت زیر باشد:
پر كردن،
,
.

4. ستون های جدول

مدل جداول CSSبه طور عمده بر روی خطوط (ردیف) تشکیل شده با استفاده از برچسب متمرکز شده است

. در عمل مواردی وجود دارد که لازم باشد قالب بندی خاصستون ها، که به روش های زیر امکان پذیر است:

با استفاده از برچسب

شما می توانید پس زمینه را برای هر تعداد ستون تنظیم کنید.

با استفاده از جدول انتخابگر td:first-child , table td:last-child می توانید استایل هایی را برای اولین یا آخرین ستون جدول تنظیم کنید (به جز سلول اول سرصفحه جدول).

با استفاده از انتخابگر جدول td:nth-child (قاعده انتخاب ستون)، می‌توانید استایل‌ها را برای هر ستون جدول تنظیم کنید.

می توانید اطلاعات بیشتری در مورد انتخابگرهای CSS بخوانید.

5. نحوه اضافه کردن عنوان جدول

با استفاده از تگ می توانید عنوانی را به جدول اضافه کنید ، و با استفاده از ویژگی caption-side می توان آن را در جلو یا زیر جدول قرار داد. برای تراز افقی متن عنوان، استفاده کنید ویژگی text-align. به ارث برده.

...

جدول شماره 1

شرکت	Q1	Q2	Q3	Q4

عنوان (سمت زیرنویس: پایین؛ تراز نوشتاری: راست؛ بالشتک: 10 پیکسل 0؛ اندازه قلم: 14 پیکسل؛ ) برنج. 2. نمونه ای از نمایش هدر زیر جدول

6. نحوه حذف فضای بین قاب های سلول

به طور پیش فرض، فریم های سلول جدول با یک فضای کوچک از هم جدا می شوند. اگر border-collapse: collapse را برای جدول تنظیم کنید، شکاف حذف خواهد شد. ملک موروثی است.

نحو

جدول (مرز - فرو ریختن: فرو ریختن؛)
برنج. 3. نمونه جداول با قاب های سلولی ادغام شده و مجزا

7. نحوه افزایش فاصله بین فریم های سلولی

با استفاده از خواص مرزی-Spacing به شما امکان می دهد فاصله بین فریم های سلول را تغییر دهید. این ملکدر کل جدول اعمال می شود. به ارث برده.

نحو

جدول (حاشیه-جمع کردن: مجزا؛ فاصله مرزی: 10px 20px؛) جدول (حاشیه-جمع کردن: جدا؛ فاصله مرز: 10px؛) برنج. 4. نمونه جداول با افزایش فاصله بین قاب های سلول

8. چگونه سلول های خالی جدول را پنهان کنیم

ویژگی vala-cells سلول های خالی را پنهان یا نشان می دهد. فقط سلول‌هایی را تحت تأثیر قرار می‌دهد که محتوایی ندارند. اگر یک سلول روی یک پس‌زمینه و یک جدول روی جدول تنظیم شود (حاشیه جمع‌کردن: collapse؛)، آن‌گاه سلول پنهان نمی‌شود. به ارث برده.

شرکت	Q1	Q2	Q3
مایکروسافت	20.3	30.5
گوگل	50.2	40.63	45.23

جدول (حاشیه: 1px جامد #69c؛ حاشیه-جمع کردن: جدا؛ سلول های خالی: پنهان کردن؛ ) th, td (حاشیه: 2px جامد #69c؛) برنج. 5. مثالی از مخفی کردن یک سلول خالی جدول

9. با استفاده از ویژگی table-layout یک جدول را چیدمان کنید

طرح بندی جدول با یکی از دو رویکرد تعیین می شود: چیدمان ثابت یا چیدمان خودکار. زیر طرح در در این موردبه نحوه توزیع عرض جدول در عرض سلول ها اشاره دارد. ملک به ارث نمی رسد.

نحو

جدول (طرح جدول: ثابت؛)

10. بهترین چیدمان میز

1. مینیمالیسم افقی

جداول افقی جدول هایی هستند که متن در آنها به صورت افقی خوانده می شود. هر موجودیت یک ردیف جداگانه است. می‌توانید با قرار دادن یک حاشیه دو پیکسلی در زیر هدر، ظاهری مینیمالیستی به جدول‌هایی مانند این بدهید.

کارمند	حقوق	جایزه	سرپرست
استیون سی کاکس	$300	$50	باب
ژوزفین تان	$150	-	آنی
جویس مینگ	$200	$35	اندی
جیمز ای پنتل	$175	$25	آنی

جدول ( فونت-خانواده: "Lucida Sans Unicode"، "Lucida Grande"، Sans-Serif؛ اندازه قلم: 14 پیکسل؛ پس زمینه: سفید؛ حداکثر عرض: 70٪؛ عرض: 70٪؛ حاشیه-کوچک کردن: جمع کردن؛ متن -align: چپ؛ ) th (وزن قلم: معمولی؛ رنگ: #039؛ حاشیه پایین: 2px جامد #6678b1؛ بالشتک: 10px 8px؛ ) td (رنگ: #669؛ بالشتک: 9px 8px؛ انتقال: 0.3 ثانیه خطی؛ ) tr:hover td (رنگ: #6699ff;)

در مقادیر زیادردیف ها، این طراحی جدول خواندن آنها را دشوار می کند. برای حل این مشکل، می توانید یک حاشیه یک پیکسلی به زیر تمام عناصر td اضافه کنید.

Td ( حاشیه پایین: 1px جامد #cccc؛ رنگ: #669؛ بالشتک: 9px 8px؛ انتقال: 0.3s خطی؛ )/*بقیه کد مانند مثال بالا است*/

افزودن یک افکت :hover به عنصر tr باعث می شود جداول طراحی شده به سبک مینیمالیستی خواناتر شوند. هنگامی که ماوس خود را روی یک سلول می‌برید، سلول‌های باقی‌مانده در همان ردیف به طور همزمان برجسته می‌شوند و اگر جدول‌ها دارای چندین ستون هستند، ردیابی اطلاعات را آسان‌تر می‌کند.

Th ( وزن قلم: معمولی؛ رنگ: #039؛ بالشتک: 10px 15px؛ ) td (رنگ: #669؛ حاشیه بالا: 1px جامد #e8edff؛ padding: 10px 15px; ) tr:hover td (پس‌زمینه: #e8edff ;)

2. مینیمالیسم عمودی

اگرچه چنین جداول به ندرت مورد استفاده قرار می گیرند، جداول عمودی برای دسته بندی یا مقایسه توصیفات اشیاء نشان داده شده توسط یک ستون مفید هستند. می توانید با افزودن فضا برای جداسازی ستون ها، آنها را به سبک مینیمالیستی طراحی کنید.

Th (وزن قلم: معمولی؛ حاشیه پایین: 2px توپر #6678b1؛ حاشیه-راست: 30px جامد #fff؛ حاشیه-چپ: 30px جامد #fff؛ رنگ: #039؛ بالشتک: 8px 2px؛ ) td (حاشیه- سمت راست: 30px توپر #fff؛ حاشیه-چپ: 30px جامد #fff؛ رنگ: #669؛ بالشتک: 12px 2px؛ )

3. سبک جعبه ای

قابل اعتمادترین سبک برای طراحی انواع میز، سبک به اصطلاح "جعبه ای" است. کافی است یک خوب را انتخاب کنید طرح رنگیو سپس رنگ پس زمینه را برای همه سلول ها تنظیم کنید. فراموش نکنید که با قرار دادن مرزها به عنوان جداکننده بر تفاوت بین خطوط تأکید کنید.

Th (اندازه قلم: 13 پیکسل؛ وزن قلم: معمولی؛ پس‌زمینه: #b9c9fe؛ حاشیه بالا: 4 پیکسل جامد #aabcfe؛ حاشیه پایین: 1 پیکسل توپر #fff؛ رنگ: #039؛ لایه‌بندی: 8 پیکسل؛ ) td (پس‌زمینه : #e8edff؛ حاشیه پایین: 1 پیکسل توپر #fff؛ رنگ: #669؛ حاشیه بالا: 1 پیکسل شفاف؛ بالشتک: 8 پیکسل؛ ) tr:hover td (پس‌زمینه: #ccddff;)

سخت ترین کار این است که طرح رنگی را پیدا کنید که هماهنگ با وب سایت شما مطابقت داشته باشد. اگر سایت از نظر گرافیک و طراحی سنگین است، پس استفاده از این سبک برای شما بسیار سخت خواهد بود.

جدول ( فونت-خانواده: "Lucida Sans Unicode"، "Lucida Grande"، Sans-Serif؛ اندازه قلم: 14 پیکسل؛ حداکثر عرض: 70٪؛ عرض: 70٪؛ تراز نوشتاری: مرکز؛ کوچک کردن حاشیه: جمع کردن ؛ حاشیه بالا: 7 پیکسل توپر #9baff1؛ حاشیه پایین: 7 پیکسل توپر #9baff1؛ ) th (اندازه قلم: 13 پیکسل؛ وزن قلم: عادی؛ پس‌زمینه: #e8edff؛ حاشیه سمت راست: 1 پیکسل توپر #9baff1؛ حاشیه- سمت چپ: 1px جامد #9baff1؛ رنگ: #039؛ بالشتک: 8px؛ ) td (پس‌زمینه: #e8edff؛ حاشیه-راست: 1px جامد #aabcfe؛ حاشیه-چپ: 1px جامد #aabcfe؛ رنگ: #669؛ بالشتک: 8px ;)

4. گورخر افقی

میز گورخر کاملاً جذاب و راحت به نظر می رسد. یک رنگ پس زمینه اضافی می تواند به عنوان یک نشانه بصری برای افراد هنگام خواندن جدول باشد.

Th ( وزن قلم: معمولی؛ رنگ: #039؛ بالشتک: 10px 15px؛ ) td (رنگ: #669؛ حاشیه بالا: 1px جامد #e8edff؛ بالشتک: 10px 15px؛ ) tr:nth-child(2n) ( پس زمینه: #e8edff;)

5. سبک روزنامه

برای دستیابی به به اصطلاح افکت روزنامه، می توانید حاشیه هایی را روی عناصر جدول اعمال کنید و با سلول های داخل آن بازی کنید. یک سبک روزنامه سبک و مینیمالیستی ممکن است به این صورت باشد: بازی با طرح رنگ، اضافه کردن حاشیه، پد، پس زمینه های مختلفو افکت: هنگامی که ماوس را روی یک خط قرار می دهید، نشانگر را نگه دارید.

جدول (حاشیه: 1px توپر #69c;) th (وزن قلم: معمولی؛ رنگ: #039؛ حاشیه پایین: 1px خط چین #69c؛ بالشتک: 12px 17px؛ ) td (رنگ: #669; بالشتک: 7px 17px; ) tr:hover td (پس‌زمینه: #ccddff;)

جدول (حاشیه: 1px توپر #69c;) th (وزن قلم: معمولی؛ رنگ: #039؛ بالشتک: 10 پیکسل؛ ) td (رنگ: #669؛ حاشیه بالا: 1px خط چین #fff؛ بالشتک: 10px؛ پس‌زمینه: #ccddff; ) tr:hover td (پس‌زمینه: #99bcff;)

جدول (حاشیه: 1px توپر #6cf;) th (وزن قلم: معمولی؛ اندازه قلم: 13px؛ رنگ: #039؛ تبدیل متن: بزرگ؛ حاشیه سمت راست: 1px جامد #0865c2؛ حاشیه بالا: 1px جامد #0865c2؛ حاشیه سمت چپ: 1px توپر #0865c2؛ حاشیه پایین: 1px جامد #fff؛ بالشتک: 20px؛ ) td (رنگ: #669؛ حاشیه-راست: 1px خط چین #6cf؛ بالشتک: 10px 20px؛ )

6. پس زمینه میز

اگر به دنبال سریع و راه منحصر به فردطراحی میز، انتخاب کنید تصویر جذابیا عکس مربوط به موضوع جدول و آن را به عنوان پس زمینه جدول قرار دهید.

Jpg") بدون تکرار؛ موقعیت پس‌زمینه: 100% 55 پیکسل؛ ) th (وزن قلم: معمولی؛ رنگ: #339؛ بالشتک: 10 پیکسل 12 پیکسل؛ ) td ( پس‌زمینه: url ("https://site/images/ back..png")؛ پس زمینه: شفاف؛ )

این سخنرانی به طور مفصل اصول استفاده از جداول در نشانه گذاری HTML را مورد بحث قرار می دهد. این شامل سازماندهی جدولی متن، شبکه مختصات جدولی، و گرافیک سازماندهی شده در جداول است.

ابزارهایی برای توصیف جداول در HTML

مانند توسعه WWWمشخص شد که وجوه موجود در HTML برای نمایش با کیفیت بالا کافی نیست انواع مختلفاسناد. نقطه ضعف HTML نبود ابزار برای نمایش جداول بود. برای این منظور، متن از پیش فرمت شده (برچسب

) که در آن جدول با حروف ASCII مشخص شده است.  اما این شکل از ارائه جدول کافی نبود کیفیت بالاو از سبک کلی سند متمایز بود.  پس از معرفی جداول در HTML، وب مسترها اکنون نه تنها ابزاری برای قرار دادن متن و داده های عددی، بلکه یک ابزار طراحی قدرتمند برای قرار دادن در آن داشتند. در جای مناسبصفحه نمایش تصاویر گرافیکی و متن.

ایجاد جداول در HTML
تگ برای توصیف جداول استفاده می شود<ТАВLЕ>.  برچسب بزنید<ТАВLЕ>مانند بسیاری دیگر، خط قبل و بعد از جدول را به طور خودکار ترجمه می کند.
ایجاد ردیف - برچسب جدول<ТR>
برچسب بزنید<ТR>(Table Row) یک ردیف جدول ایجاد می کند.  تمام متن ها، سایر برچسب ها و ویژگی هایی که باید در یک خط قرار گیرند باید بین تگ های lt;TR> قرار گیرند..
تعریف سلول های جدول - برچسب<ТD>
سلول های دارای داده معمولاً در یک ردیف جدول قرار می گیرند.  هر سلول حاوی متن یا تصویر باید با برچسب احاطه شود<ТD>.  تعداد تگ ها<ТD>در یک ردیف تعداد سلول ها را مشخص می کند

 

 
جدول
 
 

 

 
اگر یک جدول دارای دو تگ TR باشد، پس دارای دو ردیف است.
 
 

 
اگر سه نفر در خط هستند تگ TD,
 
سپس در آن
 
سه ستون
 
 
 


 
عناوین ستون های جدول - برچسب<ТН>
عناوین ستون‌ها و ردیف‌های جدول با استفاده از تگ هدر تنظیم می‌شوند<ТН>(TableHeader، عنوان جدول).  این برچسب ها مشابه هستند<ТD>.  تفاوت این است که متن بین تگ ها محصور شده است<ТН>، به طور خودکار به صورت پررنگ نوشته می شود و به طور پیش فرض در وسط سلول قرار می گیرد.  می توانید متن را از مرکز خارج کنید و متن را در سمت چپ یا راست تراز کنید.  اگر استفاده می کنید<ТD>با برچسب<В>و صفت<АLIGN=center>، متن نیز شبیه یک عنوان خواهد بود.  با این حال، توجه داشته باشید که همه مرورگرها از جداول پشتیبانی نمی کنند فونت پررنگ، بنابراین بهتر است هدر جدول را با استفاده از آن تنظیم کنید<ТН>.

 

 

 

 
هدر به طور پیش فرض در مرکز قرار دارد
 
هدر می تواند به ستون ها بپیوندد
 
 

 
هدر را می توان قبل از ستون ها قرار داد
 
متن یا داده
 
متن یا داده
 
 

 
هدر می تواند خطوط را به هم متصل کند
 
متن یا داده
 
متن یا داده
 
 

 
متن یا داده
 
متن یا داده
 
 

 
متن یا داده
 
متن یا داده
 
 


استفاده از هدر جدول - برچسب<САРТIОN>
برچسب بزنید به شما اجازه می دهد تا سرفصل های جدول ایجاد کنید.  به طور پیش فرض، عنوان ها در مرکز قرار می گیرند و در بالا (<САРТION АLIGN=top>، یا زیر میز (<САРТION ALIGN=bottom>).  عنوان می تواند شامل هر متن و تصویری باشد.  متن به خطوط مربوط به عرض جدول تقسیم می شود.  گاهی تگ کنید<САРТION>برای امضای یک عکس استفاده می شود.  برای این کار کافی است یک جدول بدون حاشیه را توصیف کنید.

 

 

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

 
متن یا داده
 
متن یا داده
 
متن یا داده
 
متن یا داده
 
 
 

 
سر به زیر جدول
 

 
متن یا داده
 
متن یا داده
 
متن یا داده
 
 


ویژگی NOWRAP
به طور معمول، هر متنی که در یک خط از سلول جدول قرار نمی گیرد به آن می رود خط بعدی.  با این حال، هنگام استفاده از ویژگی NOWRAP با برچسب ها<ТН>یا<ТD>طول سلول به گونه ای گسترش می یابد که متن موجود در آن در یک خط قرار می گیرد.
ویژگی COLSPAN
برچسب ها<ТD>و<ТН>با استفاده از ویژگی COLSPAN (طول ستون، اتصال ستون) اصلاح شده است.  اگر می‌خواهید یک سلول پهن‌تر از بالا یا پایین ایجاد کنید، می‌توانید از ویژگی COLSPAN برای کشش آن بر روی هر تعداد سلول معمولی استفاده کنید.

 

 

 

 

 
اگر می خواهید هر سلولی را پهن تر از بالا یا پایین بسازید،
 
می توانید از ویژگی COLSPAN=2 استفاده کنید،
 
 

 
تا آن را روی هر تعداد سلول معمولی بکشید.
 
 
 


ویژگی ROWSPAN
ویژگی ROWSPAN در برچسب ها استفاده می شود<ТD>و<ТН>، شبیه ویژگی COLSPAN= است، فقط تعداد خطوطی را که سلول روی آنها کشیده شده است را مشخص می کند.  اگر عددی بزرگتر از یک را در ویژگی ROWSPAN=s مشخص کرده‌اید، تعداد ردیف‌های مربوطه باید در زیر سلول کشیده شده باشد.  نمی توان آن را در پایین جدول قرار داد.
ویژگی WIDTH
ویژگی WIDTH در دو مورد استفاده می شود.  می توانید آن را در یک برچسب قرار دهید<ТАВLЕ>برای دادن عرض کل جدول، یا می تواند در برچسب ها استفاده شود<ТD>یا<ТН>برای تنظیم عرض یک سلول یا گروهی از سلول ها.  عرض را می توان بر حسب پیکسل یا درصد مشخص کرد.  برای مثال، اگر در تگ تنظیم کنید<ТАВLЕ>WIDTH=250، جدولی با عرض 250 پیکسل بدون در نظر گرفتن اندازه صفحه روی مانیتور خود دریافت خواهید کرد.  هنگام تنظیم WIDТН=50% در تگ<ТАВLЕ>جدول نیمی از عرض صفحه را در هر اندازه تصویر روی صفحه اشغال می کند.  بنابراین، هنگام تعیین عرض جدول به صورت درصد، به خاطر داشته باشید که اگر کاربر دارای یک نمای باریک باشد، ممکن است صفحه شما کمی عجیب به نظر برسد.  اگر از پیکسل‌ها استفاده می‌کنید و جدول عریض‌تر از ناحیه مشاهده است، یک نوار پیمایش در پایین صفحه ظاهر می‌شود تا در سراسر صفحه به چپ و راست حرکت کنید.  بسته به وظایف در دست، هر یک از روش های تنظیم عرض جدول ممکن است مفید باشد.

 

 

 

 
متن یا داده - عرض 100٪
 
 
یا 

 

 

 
متن یا داده - عرض 50٪
 
 
یا 

 

 

 
متن یا داده - 200 پیکسل عرض
 
 
یا 

 

 

 
متن یا داده - 100 پیکسل عرض
 
 


اعمال سلول های خالی
اگر سلولی فاقد داده باشد، هیچ مرزی نخواهد داشت.  اگر می خواهید سلولی حاشیه داشته باشد اما محتوا نداشته باشد، باید چیزی را در آن قرار دهید که هنگام مشاهده قابل مشاهده نباشد.  شما می توانید استفاده کنید خط خالی <ВR>.  حتی می توانید ستون های خالی را با تعیین عرض آنها به پیکسل یا تعریف کنید واحدهای نسبیو بدون وارد کردن هیچ داده ای به سلول های حاصل.  این ابزار می تواند هنگام قرار دادن متن و گرافیک در یک صفحه مفید باشد.
ویژگی CELLADDING
این ویژگی عرض فضای خالی بین محتویات سلول و مرزهای آن را تعیین می کند، یعنی حاشیه های داخل سلول را تنظیم می کند.

 

 

 

 

 
متن یا داده
 
متن یا داده
 
متن یا داده
 
 

 
متن یا داده
 
متن یا داده
 
متن یا داده
 
 


 

 

 
متن یا داده
 
متن یا داده
 
متن یا داده
 
 

 
متن یا داده
 
متن یا داده
 
متن یا داده
 
 
 


ویژگی های ALIGN و VALIGN
برچسب ها<ТR>, <ТD>و<ТН>را می توان با اصلاح کرد صفات ALIGNو VALIGN. صفت ALIGNتعیین می کند که آیا متن و گرافیک به صورت افقی، یعنی چپ یا راست، یا در مرکز تراز هستند. تراز افقیرا می توان به چند طریق مشخص کرد:
ALIGN=bleedleftمحتویات سلول را نزدیک لبه چپ فشار می دهد.
ALIGN=سمت چپبا در نظر گرفتن تورفتگی مشخص شده توسط ویژگی CELLPADDING، محتویات سلول را به سمت چپ تراز می کند.
ALIGN=مرکزمحتویات سلول را مرکز می کند.
ALIGN=راستبا در نظر گرفتن تورفتگی مشخص شده توسط ویژگی CELLPADDING، محتوای یک سلول را به سمت راست تراز می کند.

 

 

 

 
متن یا داده
 
متن یا داده
 
متن یا داده
 
 

 
متن یا داده
 
متن یا داده
 
متن یا داده
 
 

 
متن یا داده
 
متن یا داده
 
متن یا داده
 
 

 
متن یا داده
 
متن یا داده
 
متن یا داده
 
 

 
متن یا داده
 
متن یا داده
 
متن یا داده
 
 


ویژگی VALIGN متن و گرافیک را در یک سلول به صورت عمودی تراز می کند. چیدمان عمودیرا می توان به چند طریق مشخص کرد:
VALIGN=بالامحتویات یک سلول را با حاشیه بالایی آن تراز می کند.
VALIGN = وسطمحتویات سلول را به صورت عمودی در مرکز قرار می دهد.
VALIGN=پایینمحتویات یک سلول را با حاشیه پایین آن تراز می کند.

 

 

 

 

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

 
VALIGN=top محتویات یک سلول را با حاشیه بالایی آن تراز می کند.
 
بالا،
 
بالا،
 
بالا.
 
 

 
VALIGN=middle محتویات یک سلول را به صورت عمودی متمرکز می کند.
 
وسط،
 
وسط،
 
وسط
 
 

 
VALIGN=bottom محتویات یک سلول را با حاشیه پایین تراز می کند.
 
پایین،
 
پایین،
 
پایین
 
 
 


ویژگی BORDER
در تگ<ТАВLЕ>اغلب تعیین می کند که مرزها، یعنی خطوط اطراف سلول های جدول و خود جدول، چگونه به نظر می رسند.  اگر قاب را مشخص نکنید، یک جدول بدون خط دریافت می کنید، اما برای آنها فضا اختصاص داده می شود.  همین نتیجه را می توان با تنظیم به دست آورد<ТАВLЕ ВОRDER=0>.  گاهی اوقات می خواهید حاشیه را ضخیم تر کنید تا بهتر به چشم بیاید.  برای جلب توجه به یک عکس یا متن، می‌توانید حاشیه‌هایی را منحصراً پررنگ تنظیم کنید.  هنگام ایجاد جداول تو در تو، باید این کار را انجام دهید جداول مختلفحاشیه هایی با ضخامت های مختلف برای سهولت تشخیص آنها.
ویژگی CELLSPACING
ویژگی CELLSPACING عرض فضاهای بین سلول ها را به پیکسل مشخص می کند.  اگر این ویژگی مشخص نشده باشد، مقدار پیش فرض دو پیکسل است.  با استفاده از ویژگی CELLSPACING= می توانید متن و گرافیک را در هر کجا که نیاز دارید قرار دهید.  اگر می خواهید ترک کنید جای خالی، می توانید یک فاصله در سلول وارد کنید.

 

 

 

 

 
متن یا داده
 
متن یا داده
 
متن یا داده
 
 

 
متن یا داده
 
متن یا داده
 
متن یا داده
 
 
 

 

 
متن یا داده
 
متن یا داده
 
متن یا داده
 
 

 
متن یا داده
 
متن یا داده
 
متن یا داده
 
 
 

 

 
متن یا داده
 
متن یا داده
 
متن یا داده
 
 

 
متن یا داده
 

 
متن یا داده
 
 
 


ویژگی BGCOLOR
این ویژگی به شما امکان می دهد رنگ پس زمینه را تنظیم کنید.  بسته به اینکه با کدام برچسب (TABLE، TR، TD) استفاده می‌شود، رنگ پس‌زمینه را می‌توان برای کل جدول، برای یک ردیف یا برای یک سلول جداگانه تنظیم کرد.  معنی از این صفتکد RGB یا نام رنگ استاندارد است.

 

 

 

 

 
متن یا داده
 
متن یا داده
 
متن یا داده
 
 

 
متن یا داده
 
متن یا داده
 
متن یا داده
 
 
 


ویژگی پس زمینه
این ویژگی تصویر پس زمینه جداول را مشخص می کند.  برای تگ های TABLE و TD اعمال می شود.  مقدار آن آدرس فایل با است تصویر پس زمینه.  استفاده از این ویژگی در زیر مورد بحث قرار گرفته است.
استفاده از جداول در طراحی صفحه
خوبی جداول این است که در صورت تمایل می توانید مرزهای آنها را نامرئی کنید.  این امکان استفاده از تگ را فراهم می کند<ТАВLЕ>متن و گرافیک را به زیبایی در صفحه قرار دهید.  برچسب خداحافظ<ТАВLЕ>تنها ابزار قالب بندی قدرتمند در HTML باقی می ماند.  طراحان صفحات وب در حال حاضر تقریباً همان آزادی را در مورد استفاده از فضای سفید به عنوان سازندگان صفحات وب دارند. صفحات چاپ شده.  جداول بهترین راه برای دور شدن از قرار دادن سلسله مراتبی متن در صفحات وب هستند.
اگر مرورگر از جداول پشتیبانی کند، معمولاً بیشتر موارد را به درستی نمایش می دهد جلوه های جالببا کمک آنها به دست آمده است

 

 

 

 

 

 
دانشگاه آموزشی دولتی اورال
 
خوش آمدی!
 

 

 
دوره آموزشی"مبانی مسترینگ وب"
 
 
 
 
 
 


 
ایجاد جداول رنگارنگ
برخی از مرورگرها به شما امکان نمایش رنگ ها را می دهند.  روش های مختلفی برای رنگ آمیزی جدول وجود دارد که بیشتر به مرورگری که استفاده می کنید بستگی دارد.
حاشیه های رنگی در Netscape Navigator.  نه تنها می توانید دور میز را احاطه کنید قاب زیبا، بلکه رنگی برای آن تعیین کنید که با رنگ متن و پس زمینه متفاوت است.  یک GIF خاکستری ساده (یا هر گیفی که می خواهید به عنوان پس زمینه داشته باشید) ایجاد کنید و آن را در یک برچسب تعریف کنید.<ВODY>به عنوان پس زمینه صفحه  سپس رنگ پس زمینه صفحه را تنظیم کنید.  در نتیجه تگ شما<ВОDY>چیزی شبیه به این خواهد بود:

 
شما یک پس زمینه دوگانه ایجاد کرده اید - GIF و رنگ مشخص شده.  در نتیجه رنگ پس زمینهدر تمام حاشیه های جدول قابل مشاهده خواهد بود خطوط افقی (<НR>).  چه GIF پس‌زمینه شما خاکستری باشد یا نباشد، خطوط رنگی و حاشیه‌های جدول به‌طور قابل توجهی برجسته می‌شوند.  اگر GIF پس‌زمینه خیلی پیچیده نباشد، زمان بارگذاری صفحه فقط کمی افزایش می‌یابد.
محبوب شد، طراحان وب عمدتا از روش جدول بندی استفاده کردند و نتایج بسیار خوبی گرفتند.

برچسب هایی که برای ساخت جدول در html استفاده می شود
جدول - برچسب مورد نیاز، میز را باز و بسته می کند 
عنوان - برچسب اختیاری، عنوان جدول را نشان می دهد 
هفتم- یک تگ اختیاری که تگ های باز و بسته شدن آن حاوی نام ستون است.  به طور معمول پررنگ به نظر می رسد 
tr- یک برچسب مورد نیاز که خط را باز و بسته می کند 
td- یک برچسب ضروری که باز و بسته شدن یک سلول را در یک ردیف نشان می دهد 

کد مثال برای یک جدول ساده
 

 

 

 



 



 

 

 


 


 
 
 
نام جدول
 
 
استوبتس 1 

 
 
 
استوبتس 2 

 
 
 
 
 
 
متن در سلول اول 

 
 
 
متن در سلول دوم 

 
 
 
 
 




 
مرورگر نمایش داده خواهد شد

هدف جداول در html
درس روی میزها بسیار مهم است!  به لطف جداول، می توانید نه تنها متن، بلکه تصاویر، پیوندها و موارد دیگر را نیز مرتب کنید.  در جدول می توانید مشخص کنید زمینه(یا رنگ آن) تورفتگی, عرض, مرزو سایر پارامترها، که ظاهر زیبایی به آن می بخشد.  جدول - اولین قدم شما برای درک طراحی وب سایت!  پیش از این، بسیاری از سایت ها به طور کامل به عنوان جدول قرار می گرفتند، یعنی هر چیزی که کاربر می دید (منوی کناری، منوی بالا، محتوا) - محتوای سلول های یک جدول بزرگ بود. 
بیایید مستقیماً به ویژگی هایی برویم که جدول را زیبا می کنند ... 
ویژگی ها و پارامترهای جداول html: تورفتگی، عرض، رنگ پس زمینه، حاشیه (فریم)
U برچسب جدولویژگی های زیر وجود دارد: 
عرض- عرض میز  می تواند بر حسب پیکسل یا % عرض صفحه نمایش باشد. 
bgcolor- رنگ پس زمینه سلول های جدول 
زمینه- پس زمینه جدول را با یک الگو پر می کند 
مرز- قاب و حاشیه در جدول.  ضخامت در پیکسل نشان داده شده است 
پوشش سلولی- بالشتک در پیکسل بین محتویات سلول و مرز داخلی آن
مانند قبل، مقدار ویژگی را در گیومه می نویسیم.
 
بیایید با استفاده از یک مثال به استفاده از این ویژگی ها نگاه کنیم.  برای انجام این کار، بیایید یک جدول ایجاد کنیم (اما قبلا بدون کپشن و برچسب th که به ندرت استفاده می شود) و پارامتر را روی ویژگی تنظیم کنید مرز, عرض (عرض جدول، ردیف یا سلول)و bgcolor (رنگ سلول)
 

 

 

 



 


 


 


 





 
در نتیجه جدول زیر در مرورگر نمایش داده می شود: 

قاب- مشخصه ای که قاب دور میز را نشان می دهد.  مقادیر زیر وجود دارد:
خالی- بدون قاب,
بالا - فقط قاب بالایی، 
زیر - فقط قاب پایین، 
hsides - فقط قاب های بالا و پایین، 
vsides - فقط فریم های چپ و راست، 
lhs - فقط قاب سمت چپ، 
rhs - فقط قاب سمت راست، 
جعبه - هر چهار قسمت قاب.
قوانین- مشخصه ای که مرزهای درون جدول، بین سلول ها را نشان می دهد.  مقادیر زیر وجود دارد:
هیچکدام - هیچ مرزی بین سلول ها وجود ندارد، 
گروه ها - مرزها فقط بین گروه های ردیف و گروه های ستون (کمی بعدا مورد بحث قرار خواهد گرفت) 
ردیف ها - فقط مرزهای بین ردیف ها، 
cols - مرزها فقط بین ستون ها، 
همه - نمایش تمام حاشیه ها.
بیایید به مثال کد نگاه کنیم
 

 

 

 


 
  
 
 
استوبتس 1 

 
 
 
استوبتس 2 

 
 
 
 
 
 



 
 


 
 
 
 

 


 


 


 





 
نتیجه
حالا بیایید سعی کنیم یک میز زیبا بسازیم.  برای انجام این کار، بیایید شروع به استفاده کنیم تراز جدول.  برای انجام این کار، پارامترهای آشنای زیر وجود دارد:
تراز کردن- تراز جدول  می توان آن را در سمت چپ (چپ)، در سمت راست (راست)، در مرکز (مرکز) قرار داد. 
فاصله سلولی- فاصله بین سلول های جدول  مشخص شده بر حسب پیکسل (پیکسل پیش فرض 0) 
پوشش سلولی- قرار دادن پیکسل ها بین محتویات سلول و مرز داخلی آن (پیکسل پیش فرض 0)
بیایید به یک مثال نگاه کنیم
 

 

 

 


 
  
 
 
استوبتس 1 

 
 

استوبتس 2 

 
 
 
 
 
 

متن در خانه اول ستون اول 

 
 
متن در سلول دوم ستون دوم 

 
 
 
 


 


 


 


 





 
مرورگر یک جدول در مرکز نمایش می دهد که به شکل زیر است:
ردیف های tr و سلول های td در جداول HTML
اجازه دهید دوباره یادآوری کنم که جداول ردیف به ردیف (tr) تشکیل می شوند.  سطرهای (tr) از قبل حاوی سلول (td) هستند.  اگر پارامتری را برای رشته (tr) مشخص کنید، برای آن معتبر خواهد بود تمام سلول ها(td) در این خط، اگر برای یک سلول خاص، پس فقط برای آن.  در مثال های بالا، رنگ ردیف را مشخص کردم؛ این پارامتر بر اساس آن در تمام سلول ها توزیع شد. 
 



 


برای تگ های tr و td موارد زیر وجود دارد
تراز کردن- تراز کردن متن در داخل یک سلول.  لبه چپ (چپ)، لبه راست (راست)، مرکز (مرکز) 
valign- تراز عمودی متن در داخل یک سلول.  بالا (بالا)، پایین (پایین)، مرکز (وسط) 
bgcolor- رنگ خط را تعیین می کند 
عرض- عرض ستون (همه سلول های زیر را می گیرند این پارامتر) به صورت پیکسل یا درصد مشخص می شود که 100٪ عرض کل جدول است. 
ارتفاع- ارتفاع سلول (همه سلول های ردیف این پارامتر را می پذیرند)
بیایید به کدی نگاه کنیم که در آن محتویات سلول ها (td) در امتداد لبه های مختلف تراز شده اند: در اولی به سمت چپ، در دومی به سمت راست:
 

 

 

 


 
 
 
 
استوبتس 1 

 
 
 
استوبتس 2 

 
 
 
 
 
 

متن در خانه اول ستون اول 

 
 
متن در سلول دوم ستون دوم 

 
 
 
 
 

 
 
استوبتس 1 

 
 
 
استوبتس 2 

 
 
 
 


 


 


 


 





 
نتیجه 

با استفاده از جداول می توانید صفحه بسیار خوبی ایجاد کنید.  فراموش نکنید که می توانید نه تنها متن را در سلول ها، بلکه تصاویر، پیوندها و غیره را نیز وارد کنید!)
با تشکر از توجه شما!  امیدوارم مطالب مفید بوده باشد!
جداول HTMLسازماندهی و نمایش داده ها با استفاده از ردیف ها یا ستون ها.  جداول از سلول هایی تشکیل شده اند که از تلاقی ردیف ها و ستون ها تشکیل شده اند. سلول های جدولمی تواند شامل هر عنصر HTML مانند سرفصل ها، لیست ها، متن، تصاویر، عناصر فرم و همچنین جداول دیگر باشد.  می توانید عنوان مرتبط با هر جدول را اضافه کنید و آن را قبل یا بعد از جدول قرار دهید.
جداول دیگر برای چیدمان و چیدمان صفحه وب استفاده نمی شوند عناصر منفرد، زیرا این تکنیک انعطاف پذیری ساختاری و سازگاری سایت را فراهم نمی کند و نشانه گذاری HTML را به میزان قابل توجهی افزایش می دهد.
برای همه عناصر جدول، و همچنین ویژگی های خود را در دسترس است.
ایجاد جداول در HTML
محتوا:
1. نحوه ایجاد جدول
جدول با استفاده از جفت برچسب
عکس. 1. ظاهرجداول بدون قالب بندی با ویژگی های css 
به طور پیش فرض، جدول و سلول ها هیچ مرز قابل مشاهده ای ندارند. مرز هابا استفاده از ویژگی border تنظیم می شوند:
/* حاشیه های بیرونی جدول خاکستری است، ضخامت 1 پیکسل */ جدول (حاشیه: 1 پیکسل خاکستری یکدست؛) /* مرزهای سلول های ردیف اول جدول */ th (حاشیه: 1px خاکستری یکدست؛) /* حاشیه ها از سلول های بدنه جدول */ td (حاشیه: 1px خاکستری جامد؛)
فاصله بین سلول های جدولبا استفاده از ویژگی جدول (border-collapse: collapse;) حذف می شوند.
عرضجدول به طور پیش فرض به عرض محتوای داخلی آن است.  برای تنظیم عرض، باید ویژگی width را تنظیم کنید:
/* عرض جدول را برابر با عرض بلوک ظرفی می کند که در آن قرار دارد */ جدول (عرض: 100٪؛) /* تنظیم می شود عرض ثابتبرای جدول */ جدول (عرض: 600 پیکسل؛)
اگر سلول های جدول روی لایه گذاریو حاشیه ها، سپس عرض جدول شامل مقادیر زیر خواهد بود: 
padding-left و padding-right، عرض حاشیه-چپ به اضافه عرض حاشیه-راست آخرین سلول در ردیف.  اگر عرض و حاشیه سلول ها مشخص شده باشد، عرض جدول مجموع عرض سلول ها به اضافه عرض حاشیه سمت چپ و عرض حاشیه سمت راست آخرین سلول در ردیف خواهد بود.
2. نحوه ایجاد ردیف های جدول
ردیف ها یا ردیف های جدول با استفاده از تگ ایجاد می شوند
.  تعداد ردیف های جدول افقی با تعداد تگ های جفت شده تعیین می شود .
3. چگونه یک سلول سرصفحه ستون جدول بسازیم
4. چگونه یک سلول بدنه جدول بسازیم
، که در یک ردیف قرار دارد، تعداد سلول های یک ردیف جدول را تعیین می کند.  تعداد جفت سلول وبرای نشان دادن هر قسمت از جدول 
عنصر باید به ترتیب زیر استفاده شود: as عنصر کودک
 
 
 
 
استوبتس 1 

 
 
 
استوبتس 2 

 
 
 
 
 
 

متن در خانه اول ستون اول 

 
 
متن در سلول دوم ستون دوم 

 
 
 
 





یک هدر ستون ایجاد می کند - یک سلول خاص که در آن متن با پررنگ برجسته می شود.  تعداد سلول های هدر با تعداد جفت های برچسب تعیین می شود

  
سلول های جدول را ایجاد می کند که داده های جدول در آنها قرار می گیرد.  برچسب های جفت شده

باید برابر با تعداد جفت سلول ها باشد
.  ویژگی های موجود برای عنصر عبارتند از colspan، rowspan، headers. 
5. نحوه اضافه کردن عنوان (عنوان) به جدول
امضای جدول ایجاد می کند.  مستقیماً بعد از برچسب اضافه شد
6. گروه بندی ردیف ها و ستون های جدول
یک گروه ساختاری از ستون ها را ایجاد می کند که سلول های منطقی همگن را برجسته می کند.  یک یا چند ستون را برای قالب بندی یکنواخت گروه بندی می کند، به شما این امکان را می دهد که به جای تکرار سبک ها برای هر سلول و هر ردیف، استایل ها را به ستون ها اعمال کنید.  مستقیماً بعد از برچسب ها اضافه شد برنج.  2. برجسته کردن ستون های جدول با رنگ های مختلف با استفاده از تگ ها و
7. گروه بندی بخش های جدول
این عنصر گروهی از سرفصل‌ها را برای ردیف‌های جدول ایجاد می‌کند تا ظاهری یکنواخت ارائه دهد.  در ترکیب با عناصر استفاده می شود
 
، بعد و و قبل  ,
و عناصر.  یک بار در یک جدول قابل استفاده است.محتویات جدول اصلی را گروه بندی می کند.  در ترکیب با عناصر و .
گروهی از ردیف‌ها را برای نشان دادن اطلاعات مربوط به مبالغ یا کل ایجاد می‌کند که در پایین جدول قرار دارند.  یک بار در جدول استفاده شده است.  بعد از برچسب، قبل از برچسب ها قرار داده شده است
و  .
 
این گروه بندی ردیف ها در استاندارد گنجانده شد به این امید که مرورگرها، هنگام نمایش جداول طولانی، ردیف های داده را در حالی که سربرگ و زیر سربرگ ثابت نگه می دارند، اسکرول کنند و هنگام خروجی آنها به چاپگر، بتوانند از هدر و زیر سربرگ استفاده کنند. به عنوان پاورقی صفحه  با این حال، مرورگرهای مدرن این کار را انجام نمی دهند و یا هر دو را به صورت ردیفی از داده ها نمایش می دهند، یا در بهترین سناریو، به سادگی سطرهای مناسب را در ابتدا و انتهای جدول قرار دهید. 
8. نحوه ادغام سلول های جدول
ویژگی های colspan و rowspan به سلول های جدول می پیوندند.  ویژگی colspan تعداد سلول های ادغام شده به صورت افقی را مشخص می کند و ویژگی rowspan تعداد سلول های عمودی را مشخص می کند.

برنج.  3. نمونه ای از ترکیب سلول های جدول به صورت افقی با استفاده از ویژگی colspan 
9. ویژگی های عناصر جدول
جدول 1. ویژگی های عناصر جدول 

مقادیر پذیرفته شده: لیستی از نام سلول ها، جدا شده با فاصله.  این نام ها باید از طریق ویژگی id به سلول ها اختصاص داده شوند.
مقادیر پذیرفته شده: هر عدد صحیح مثبت.
صفت
توضیحات، ارزش پذیرفته شده
کلسپن
تعداد سلول‌ها در یک ردیف برای ادغام افقی. 

 
 

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

 
...
...
 
طول ردیف
تعداد سلول های ستون برای ادغام عمودی. 

 
 
مقادیر ممکن: عدد از 1 تا 999.
طول
تعداد ستون های ترکیب شده برای یک کار سبک یکنواخت، پیش فرض 1 است. 

 
 
10. نمونه ای از ایجاد جدول
 
برنج.  4. با استفاده از جدول HTML یک منوی رستوران ایجاد کنید 
نشانه گذاری HTML

 

 
منوی رستوران روماشک
 

 
آشپزخانه
 
ظروف سرد
 
غذاهای داغ
 
دسر
 
 

 
سالاد
 
تنقلات، خوراک مختصر
 
اولین وعده غذایی
 
دوره های دوم
 
 

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

 
اولیو
 
ژله گوشت گاو
 
راسولنیک خانگی
 
کپور صلیبی پخته شده در خامه ترش
 
پای پنکیک
 
 

 
شاه ماهی زیر "کت خز"
 
سوف ژله ای پیک
 
هوج گوشت
 
کتلت "Pozharskie"
 
کیک "سیب زمینی"
 
 

 
اسپانیایی
 
گوش ماهی سرویچه
 
امپاناداس
 
سوپ نان با سیر
 
پائلا با غذاهای دریایی
 
چوروس
 
 

 
آووکادو و تن ماهی تن
 
آهوتومات
 
فابادا اتریشی
 
راکسو گوشت خوک
 
Almoixavena
 
 

 
لوبیا با ژامبون
 
چانفاینا
 
سوپ ماهی با کوفته های سمولینا
 
تورتیلا سیب زمینی
 
بونوئلوس
 
 

 
فرانسوی
 
سالاد Vosges
 
ریلت مرغ
 
سوپ خامه ای بادمجان "رنوار"
 
سیب زمینی اوگراتن
 
بریوچی
 
 

 
سالاد پانزانلا
 
خوشمزه پنیر
 
سوپ کدو تنبل فرانسوی
 
گراتن مرغ
 
پای لیمو لیگوریایی
 
 

 
تارتاروس
 
ماهی سالمون ترشی شده
 
سوپ "کنتی"
 
تارتفلت
 
ساوارین "پیروزی"
 
 

که در این بخشبرخی از قابلیت های خاص مرورگرهای فردی نیز مورد بحث قرار گرفته است ظرافت های فردیساخت و نمایش جداول
نمایش سلول های خالی در جداول HTML
یکی از ویژگی های ارائه جدول HTML این است مرورگرهای مختلفنمایش سلول های خالی است.  با توجه به توضیحات زبان HTMLهمه مرورگرها باید ردیف‌ها را با سلول‌های خالی بپوشانند اگر هر ردیفی نسبت به ردیف‌های دیگر سلول‌های خالی کمتری داشته باشد.  علاوه بر این، ممکن است سلول هایی در هر جایی از جدول وجود داشته باشد که حاوی داده نباشد.
بین سلول های خالی و سلول های حاوی داده های نامرئی تفاوت وجود دارد.  در سلول های خالی داخل یک جفت تگ وحاوی هیچ اطلاعات یا یک یا چند فضایی نیست که به عنوان داده تلقی نمی شود.  سلول‌های حاوی داده‌های نامرئی، برای مثال، ممکن است حاوی کد یا کد فید خط باشند 
، یا هر متنی که رنگ آن با رنگ پس زمینه سلول مطابقت داشته باشد.  در حالی که سلول‌های حاوی داده (حتی اگر نامرئی باشند) توسط همه مرورگرها یکسان ارائه می‌شوند، سلول‌های خالی به‌صورت متفاوتی ارائه می‌شوند.  مرورگر نت اسکیپ یک سلول خالی را نشان نمی دهد، یعنی جایی که در آن این سلول، بر خلاف سلول های حاوی داده، با رنگ پس زمینه صفحه پر می شود، نه رنگ پس زمینه سلول.  هیچ حاشیه ای در اطراف سلول های خالی کشیده نمی شود. HTML مثالجدول با یک سلول خالی در شکل نشان داده شده است.  4.15.
برنج.  4.15.خالی سلول HTMLجداول در مرورگرهای مختلف به صورت متفاوتی نمایش داده می شوند
مایکروسافت اینترنت اکسپلوررهر دو سلول در رنگ پس زمینه سلول ها نمایش داده می شوند.  مرورگری مانند NSCA Mosaic این فرصت را در اختیار کاربر قرار می دهد تا با انتخاب گزینه های مناسب، ماهیت نمایش سلول های خالی جدول را مشخص کند.  آگاهی از چنین ویژگی هایی به شما این امکان را می دهد که جداول نمایش داده شده را توسعه دهید به شیوه ای مناسب، صرف نظر از مرورگر انتخاب شده توسط کاربر.  در برخی موارد، کافی است به جای چند سلول خالی، سلول هایی حاوی یک کد واحد ایجاد کنید.