منو
خانهجهت یابی

جدول آماده در html. مثال: اعمال ویژگی border-collapse

09.11.2015


سلام به همه!
ما به یادگیری اصول HTML ادامه می دهیم. در این درس با مثال می گویم و نشان می دهم نحوه ساخت جدول در html. و همچنین در نظر بگیرید که چگونه می توانید رنگ سلول های جدول را تنظیم کنید، چگونه میز را در مرکز قرار دهید، یاد بگیرید چگونه یک حاشیه جدول بسازید و غیره.
جداول HTML اغلب در HTML برای فهرست کردن برخی اطلاعات استفاده می شود. قبلاً از جداول برای ایجاد چارچوب صفحات وب استفاده می شد:

... اما این در گذشته است، زیرا امروزه موارد بیشتری وجود دارد راه های موثرایجاد وایرفریم برای سایت با . من اغلب از یک جدول در وبلاگ یا وب سایت خود استفاده می کنم، به عنوان مثال، در .

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

تگ های اصلی یک جدول کدامند؟

○ برچسب جدول
این محفظه اصلی برای ایجاد جدول است که سایر عناصر جدول مانند ستون ها و ردیف ها در داخل آن قرار دارند.
برچسب بستن الزامی است.

○ برچسب تیآر

داخل ظرف

……
ردیف ها قرار می گیرند:

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

توجه:بدون استفاده از همه این تگ ها امکان ایجاد جدول وجود ندارد.

حالا بیایید سعی کنیم از تئوری استفاده کنیم و در عمل یک جدول ایجاد کنیم.

ورزش:یک جدول از یک ردیف ایجاد کنید که در آن سه ستون وجود دارد.

ردیف -1 / ستون 1 ستون 2 ستون 3

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

ردیف -1 / ستون 1 ستون 2 ستون 3
ردیف -2 / ستون 1 ستون 2 ستون 3
ردیف -3 / ستون 1 ستون 2 ستون 3

تا به حال همه چیز برای شما روشن است؟ اگر متوجه نشدی دستت را بلند کن! بله، متوجه شدم، بیایید ادامه دهیم.

حال ویژگی های جدول را در نظر بگیرید.

*ویژگی های

○ حاشیه های جدول در HTML

برای قابل مشاهده کردن جدول، برای برچسب

کاربردی صفت "مرز» .

اگر مقدار ویژگی « مرز» "0"، اگر به تگ اختصاص داده نشود، مرز قابل مشاهده نخواهد بود

صفت مرز، حاشیه در جدول نیز قابل مشاهده نخواهد بود.

حاشیه های جدول در HTML - وب سایت

ردیف -1 / ستون 1 ستون 2 ستون 3


نتیجه:

سعی کنید مقدار مشخصه را تغییر دهید مرزبر روی "ده" .

○نحوه ادغام سلول ها در جدول

از ویژگی ها برای ادغام سلول ها در جدول استفاده می شود "کلسپن"و "span" به تگ < td> .

  • colspan - ادغام سلول ها به صورت افقی.
  • rowspan - ادغام سلول ها به صورت عمودی.

در مقادیر، مشخص کنید که چند سلول ادغام شوند.

ردیف 1 ستون 1
ردیف 2 ستون 1 ردیف 2 ستون 2

نتیجه:

ردیف 1 ستون 1 ردیف 1 ستون 2
ردیف 2 ستون 1

نتیجه:

مثال پیچیده تر:

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

ردیف -1 / ستون 1 ستون 2 ستون 3
ردیف -2 / ستون 1 ستون 2 ستون 3 ستون 4


نتیجه:

○ نحوه افزایش فاصله بین سلول های جدول

برای افزایش فاصله بین متن و حاشیه سلول، ویژگی را بنویسید "بالشتک سلولی"به برچسب

در مقادیر ویژگی "cellpadding" فاصله تورفتگی را مشخص کنید

ردیف 1 ستون 1 ستون 2

نتیجه:

برای افزایش فاصله بین سلول ها در جدول، از ویژگی استفاده کنید فاصله سلولیبه برچسب

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

ردیف 1 ستون 1 ستون 2

نتیجه:

○ چگونه یک پس زمینه جدول HTML بسازیم

برای ایجاد پس‌زمینه جدول HTML از تگ k استفاده کنید

و

این صفات:

  • BGCOLOR - رنگ پس زمینه برای کل جدول یا برای هر سلول به صورت جداگانه. رنگ با کد یا کلمه مشخص می شود.
  • پس زمینه - پس زمینه در جدول با یک تصویر پر شده است.
جداول در HTML - سایت
ردیف -1 / ستون 1 ستون 2 ستون 3
ردیف -2 / ستون 1 ستون 2 ستون 3 ستون 4


نتیجه:

○ نحوه درج یک تصویر در جدول HTML

برای درج یک تصویر در جدول HTML، بین تگ

درج برچسب .
ردیف 1 سلول 1 سلول 2

نتیجه:

مقادیر بر حسب پیکسل (px) یا درصد (%) مشخص می شوند.

○ تراز کردن محتوا در جدول HTML

برای تراز کردن محتوا در یک جدول HTML، از برچسب to استفاده کنید صفت تراز کردنو "والین" :

تراز کردن- تراز افقی مطالب در جدول.
ارزش های:

  • ترک کرد - محتوا را به سمت چپ فشار دهید (پیش فرض);
  • مرکز – تنظیم در مرکز؛
  • درست - محتوا را به سمت راست فشار دهید

معتبر- تراز عمودی مطالب در جدول.
ارزش های:

  • بالا – محتویات را به بالا فشار دهید؛
  • پایین – محتویات را به پایین فشار دهید؛
  • وسط – محتوا را در وسط قرار دهید
متن

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

نتیجه:

○ نحوه وسط جدول html

برای تراز کردن میز در مرکز، باید میز را با یک برچسب بپیچید

:

کد جدول

ردیف -1 / ستون 1 ستون 2 ستون 3

برچسب های اضافی و اصلی برای جدول

جدول برای وب سایت
عنوان 1 عنوان 2
1 2

نتیجه:

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

پست قبلی
پست بعدی

.

هر ردیف جدول در یک عنصر قرار می گیرد ... .

سلول سرصفحه جدول در یک عنصر قرار می گیرد ...(در این حالت محتوا به صورت پررنگ و وسط نمایش داده می شود).

هر سلول داده جدول در یک عنصر قرار می گیرد ... .

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

..
.

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

مثال استفاده از عنصر <table><span> border="1">
جدول ابتدایی
سلول سرفصل 1سلول سرفصل 2سلول سرفصل 3
سلول داده 1 ردیف 2سلول داده 2 ردیف 2سلول داده 3 خط 2
سلول داده 1 ردیف 3سلول داده 2 خط 3سلول داده 3 خط 3


به این جدول، برای وضوح، صفت حاشیه (حاشیه) را با مقدار "1" اضافه کرده ایم که مشخص می کند حاشیه باید در اطراف سلول های جدول نمایش داده شود. ویژگی border تقریباً هرگز در HTML استفاده نمی شود، در این مورد استفاده از CSS ارجح است و انعطاف پذیری بیشتری را فراهم می کند. بعنوان بخشی از یادگیری HTMLما یاد خواهیم گرفت که چگونه جداول را به درستی تشکیل دهیم و هنگام مطالعه CSS 3در مقاله "" ما یاد خواهیم گرفت که چگونه آنها را به صورت حرفه ای استایل کنیم.

نتیجه مثال ما:

ادغام ستون ها

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

نمونه ای از اتصال ستون ها در جداول <span> border="1">
جدول ابتدایی
سلول سرفصل 1 سلول سرفصل 2
سلول داده 1 ردیف 2سلول داده 2 ردیف 2سلول داده 3 خط 2
سلول داده 1 ردیف 3سلول داده 2 خط 3سلول داده 3 خط 3


نتیجه مثال ما:

الحاق رشته

الحاق رشته ها در عناصر یا با استفاده از ویژگی rowspan مجاز است (محدوده سلول ها از بالا به پایین تنظیم می شود و چندین ردیف را در بر می گیرد - سلول به سمت پایین کشیده می شود).

نمونه ای از به هم پیوستن ردیف ها در جداول <span> border="1">
جدول ابتدایی
سلول سرفصل 1 سلول سرفصل 2
rowspan="2">سلول داده 1 ردیف 2سلول داده 2 ردیف 2سلول داده 2 خط 3
سلول داده 2 خط 3سلول داده 3 خط 3


نتیجه مثال ما:

ویژگی های ستون

نمونه ای از استفاده از ویژگی span در ستون های جداگانه یک جدول:

</span>اعمال سبک ها در ستون های جداول جداگانه <span> span="2" style="background-color:khaki">
شماره برنامهسرویسقیمت، مالش.جمع
31337بلند خواندن 1 000 1 000


نتیجه مثال ما:

اگر فقط به یک ستون نیاز دارید، کافی است ویژگی span را در داخل عنصر مشخص کنید ، داخل عنصر نیست :

مثالی از استفاده از ویژگی span یک تگ HTML <colgroup><span>
شماره برنامهسرویسقیمت، مالش.کمیسیون، مالیدن.
31337بلند خواندن 1 000 150


نتیجه مثال ما:

پارتیشن بندی یک میز

بعد تگ های HTMLبرای تقسیم یک جدول به قسمت های زیر استفاده می شود:

  • برچسب بزنید برای حاوی سرصفحه گروه در جدول استفاده می شود ("سرصفحه جدول"، با سرصفحه اشتباه نگیرید).
  • برچسب بزنید برای حاوی "پانویس" جدول (footer) استفاده می شود.
  • برچسب بزنید برای حاوی "بدن" جدول (بدنه) استفاده می شود.

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

(به عنوان یک عنصر کودک (تودرتو)، در صورت وجود برچسب (گروهی از ستون ها را در جدول تعریف می کند) باید دنبال شود بعد ازاین عناصر، اما قبل ازاز هر برچسبی , و . علاوه بر این، عنصر باید یک یا چند تگ داشته باشد داخل (ظرفی برای ایجاد رشته).

عناصر

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

</span>مثال استفاده از برچسب <thead><span>
(نام جدول) و
style="background-color:silver"> style="background-color:coral" > style="background-color:khaki">
سرویسقیمت
مجموع 3 000
بلند خواندن 1 000
نواختن سوراخ کننده 2 000


نتیجه مثال ما.

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

عنصر

به عنوان محفظه ای برای عناصری که محتویات جدول را تعریف می کنند عمل می کند. برای ایجاد یک ردیف جدول، باید داخل عنصر را اضافه کنید
برچسب بلوک جفت شده (مخفف شده از انگلیسی "tаЫе row" - ردیف جدول). چند تا تگ شما اضافه کنید، سطرهای زیادی در جدول وجود خواهد داشت. برچسب باز کردن شروع یک ردیف جدول جدید را نشان می دهد. عناصر بعد از آن قرار می گیرند. .

عنصر

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

وظایف

  • حاشیه میز دوتایی را بردارید

    به طور پیش فرض حاشیه جدول دارای اثر یک حاشیه دوتایی است، کد را طوری تغییر دهید که تمام خطوط این حاشیه تک شوند.

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

انتخاب ویرایشگر

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

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

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

الگوریتم ایجاد جدول

ابتدا بیایید یک الگوریتم کوتاه در مورد نحوه ساخت جدول در HTML ایجاد کنیم. این برای اینکه دنباله هر مرحله را درک کنید ضروری است. سپس نحوه اجرای هر یک از نقاط را دقیقاً تحلیل خواهیم کرد.

بیایید با مراحل مقدماتی شروع کنیم.

1. یک تصویر شماتیک از جدول را روی یک کاغذ بکشید.

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

3. تعداد سلول های سرصفحه را در ردیف تعیین کنید (به عنوان مثال، سلول های "No"، "Name" و غیره).

4. ما پارامترهای اصلی جدول را می نویسیم - رنگ، ارتفاع و عرض، تراز متن - به طور کلی، هر چیزی که به نظر شما ضروری است.

1. برچسب های جدول را درج کنید.

2. برچسب های خط را بر اساس تعداد مورد نیاز خود وارد کنید.

3. در سطرها تگ های سلول ها (معمولی و بزرگ) را نیز بر اساس عددی که روی کاغذ شما نوشته شده درج می کنیم.

4. پارامترها را برای جدول به عنوان یک کل تنظیم کنید.

5. در صورت لزوم، شاخص هایی را برای سلول های منفرد.

6. سلول های ما را با متن پر کنید.

یک جدول ایجاد کنید

بنابراین، شما یک ویرایشگر را انتخاب کرده اید، اکنون بیایید نحوه ایجاد جدول در HTML را بیابیم. برچسبی که با آن یک جدول در کد صفحه درج می شود (

(مخفف شده از انگلیسی "tаЫе data" - داده های جدول)، که هر کدام یک سلول جداگانه در این ردیف قرار می دهند. داخل عنصر شما محتوای خود (متن، اعداد، تصاویر و غیره) را که در آن سلول نمایش داده شده است قرار می دهید. انتهای یک خط با یک تگ بسته نشان داده می شود
(مخفف شده از انگلیسی "tаЫе heading" - عنوان جدول) - یک عنصر جدول اختیاری است که به همان شکل عنصر استفاده می شود. ، اما هدف آن ایجاد یک عنوان سطر یا ستون است. به طور معمول، عنصر در ردیف اول جدول قرار می گیرد. مرورگرها متن را در یک عنصر نمایش می دهند با حروف درشتو مرکز آن نسبت به سلول است. کاربرد در کد عنصر به افرادی که از صفحه‌خوان‌ها استفاده می‌کنند کمک می‌کند و عملکرد جدول‌های فهرست‌سازی را توسط موتورهای جستجو بهبود می‌بخشد.

جدول ساده ای را در نظر بگیرید که دارای سه سطر و سه ستون است و سلول های سطر اول عنوان ستون های مربوطه هستند. به طور پیش فرض، جداول معمولاً بدون حاشیه نمایش داده می شوند:

مثال: جدول HTML ساده

  • خودت آن را امتحان کن "

سرفصل 1سرفصل 2سرفصل 3
سلول 2x1سلول 2x2سلول 2x3
سلول 3x1سلول 3x2سلول 3x3

حاشیه جدول

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

مثال: اعمال یک ملک مرز

  • خودت آن را امتحان کن "




قاب دور میز

سرفصل 1سرفصل 2سرفصل 3
سلول 2x1سلول 2x2سلول 2x3
سلول 3x1سلول 3x2سلول 3x3



تک قاب برای میز

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

مثال: اعمال یک ملک فروپاشی مرز

  • خودت آن را امتحان کن "




قاب دور میز

سرفصل 1سرفصل 2سرفصل 3
سلول 2x1سلول 2x2سلول 2x3
سلول 3x1سلول 3x2سلول 3x3



حواشی و فواصل جدول

به‌طور پیش‌فرض، اندازه سلول‌های جدول با محتوای آن‌ها تنظیم می‌شود، اما گاهی اوقات لازم است که در اطراف داده‌های جدول مقداری پد باقی بماند. از آنجایی که فاصله و حاشیه به عناصر ارائه داده مربوط می شود، این فضا با استفاده از شیوه نامه های CSS پیکربندی می شود. فیلد سلولی ( لایه گذاری) فاصله بین محتویات سلول و مرز آن (حاشیه) است. برای اضافه کردن آن، از ویژگی استفاده کنید لایه گذاریبه عنصر

یا . فاصله سلولی ( فاصله مرزی) فاصله بین آنهاست ( یا ). ابتدا یک مقدار تعیین کنید جداگانه، مجزاویژگی فروپاشی مرزعنصر و سپس با تغییر مقدار پارامتر فاصله بین سلول ها را تنظیم کنید فاصله مرزی. پیش از این، ویژگی ها مسئول زمینه ها و فاصله سلول ها بودند بالشتک سلولیو فاصله سلولیعنصر
، اما در مشخصات HTML5 منسوخ شده بودند.

مثال استفاده لایه گذاریو فاصله مرزی:

مثال: اعمال خواص لایه گذاریو فاصله مرزی

  • خودت آن را امتحان کن "




بالشتک و فاصله مرزی

سلول 1سلول 2
سلول 3سلول 4



عرض میز

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

جدول (عرض: 100%؛)

مثال: اعمال یک ملک عرض

  • خودت آن را امتحان کن "
سلول 1سلول 2
سلول 3سلول 4




عرض: 100%

سلول 1سلول 2
سلول 3سلول 4



ادغام سلول ها (colspan و rowspan)

یکی از ویژگی‌های اصلی ساختار جدول، ادغام سلول‌ها است که شامل کشش یک سلول برای ایجاد چندین ردیف یا ستون است. این به شما امکان می دهد ساختارهای پیچیده جدول ایجاد کنید: سرصفحه ها

یا سلول ها با افزودن صفات ترکیب می شود کلسپنیا دهانه ردیف. صفت کلسپنتعداد سلول هایی که در آن قرار دارد را تعیین می کند سلول داده شدهبه صورت افقی و دهانه ردیف- به صورت عمودی

ادغام ستون ها

ادغام ستون با استفاده از ویژگی به دست می آید کلسپندر عناصر

یا - سلول به سمت راست کشیده می شود و ستون های بعدی را می پوشاند. در مثال زیر مقدار ویژگی کلسپن 2 است، به این معنی که سلول باید دو ستون باشد.

مثال: اعمال یک ویژگی کلسپن

  • خودت آن را امتحان کن "




ویژگی colspan

کلسپن="2">سلول دو ستونی
سلول 1سلول 2
سلول 3سلول 4



الحاق رشته

ردیف هایی که با یک ویژگی به هم پیوسته اند دهانه ردیف، دقیقاً مانند ستون های ادغام شده رفتار می کنند، تنها با این تفاوت که محدوده سلول از بالا به پایین مشخص می شود و چندین ردیف را در بر می گیرد.
این مثال سلول اول جدول را دو ردیف به سمت پایین کشیده است:

مثال: اعمال یک ویژگی دهانه ردیف

  • خودت آن را امتحان کن "
سلول روی دو خط سلول 1سلول 2
سلول 3سلول 4




صفت rowspan

دهانه ردیف="2"> سلول در دو خط سلول 1سلول 2
سلول 3سلول 4



سربرگ جدول

یک تگ جفت برای ایجاد عنوان یا عنوان برای یک جدول استفاده می شود

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

مثال: اعمال تگ

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

محتوای اصلی (بدنه) جدول باید در داخل عنصر باشد

(می تواند چندین بلوک از این قبیل در جدول وجود داشته باشد). برای گروه بندی منطقی ردیف ها در پایین جدول (یعنی ایجاد یک "پانویس" جدول)، از برچسب استفاده کنید. (بیش از یک برچسب در هر جدول مجاز نیست ). AT کد منبعبرچسب زدن قبل از برچسب قرار دهید . علاوه بر گروه بندی منطقی، یکی از دلایل استفاده از عناصر است و این است که اگر جدول شما بیش از حد طولانی است که نمی‌توانید یکباره روی صفحه نمایش داده شود (یا چاپ شود)، مرورگر عنوان را نیز نمایش می‌دهد ( ) و خط آخر ( ) هنگامی که کاربر شروع به پیمایش در جدول شما می کند.

مثال: برچسب ها

, و
  • خودت آن را امتحان کن "




تگ های thead، tbody و tfoot

  • خودت آن را امتحان کن "




عنصر زیرنویس

این سرفصل جدول است
سلول روی دو خط سلول 1سلول 2
سلول 3سلول 4



برچسب های گروه بندی عناصر جدول

از برچسب ها برای گروه بندی عناصر جدول استفاده می شود.

سرفصل 1سرفصل 2< /th>
این سر جدول است.
این پاورقی جدول است
سلول 1سلول 2سلول 3سلول 4



با اینکه ما جلوی

) جفت می شود، یعنی ساخت ما با این تگ شروع می شود و با آن به پایان می رسد
.

با درج تگ های جدول، به ساخت ردیف ها و سلول ها می رویم.

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

برای سلول های سرصفحه، از یک عنصر جفت شده استفاده کنید .

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

چگونه ممکن است به نظر برسد؟ کم و بیش مثل این:

  • ;
  • ;
  • ;
  • ;
  • ;
  • ;
  • ;
  • ;
  • شماره p / pنام خانوادگی
    1;
  		• ایوانف
    .

همانطور که می بینید، هیچ چیز پیچیده ای در این مورد وجود ندارد. نکته اصلی این است که در تعداد ردیف ها و سلول ها اشتباه نگیرید. در غیر این صورت، جدول ممکن است کج شود.

ما ایجاد یک جدول در HTML را بررسی کردیم، اکنون می‌توانیم به پارامترهای خود ماتریس و ردیف‌ها و سلول‌های آن برویم.

گزینه های جدول

هنگام نوشتن کد باید به نکات زیر توجه کنید: تراز با حاشیه، پس زمینه، متن و ....

پارامترهای جدول در تگ تنظیم می شوند

. این شامل:

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

2. Bordercolor - رنگ حاشیه. می توان به عنوان تنظیم کرد کد هگزرنگ (#00008B) و نام انگلیسی آن (DarkBlue). به طور پیش فرض همیشه خاکستری است.

3. Bgcolor - همچنین با کد یا نام تنظیم می شود.

4. تراز - تراز کردن متن در پشت میز. پیش فرض تراز چپ است. گزینه های زیر برای این پارامتر وجود دارد:

  • چپ - پیچیدن به سمت راست؛
  • بسته بندی سمت راست - چپ؛
  • مرکز - میز را در مرکز بدون بسته بندی نمایش دهید.

5. عرض و ارتفاع - عرض و ارتفاع میز. می توان هم به پیکسل و هم به صورت درصد (نسبت به اندازه پنجره مرورگر) مشخص کرد.

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

در مورد رنگ متن، فرمت آن مانند متن معمولی در فرمت HTML است.

نمونه چیدمان جدول:

;
  • ;
  • ;
  • ;
  • ;
  • ;
  • ;
  • ;
  • شماره p / pنام خانوادگی
    1;
  		• ایوانف
    .

    گزینه های ردیف

    بنابراین، ما قبلاً متوجه شده ایم که چگونه یک جدول در HTML بسازیم و پارامترهای اصلی آن را تجویز کنیم. اما اگر لازم باشد یک خط را برجسته کنیم، چه؟ آیا باید فرمت آن را با متن اصلی جدول متفاوت کنم؟

    پارامترهای رشته در تگ نوشته شده است درست مانند داده های جدول. متغیرهای زیر را می توان برای یک رشته تنظیم کرد:

    1. Border، bordercolor و bgcolor قبلاً برای شما شناخته شده است.

    2. تراز - تراز متن در یک خط. می تواند مقادیر چپ، مرکز و راست را بگیرد.

    3. Valign - این تگ متن را به صورت عمودی تراز می کند. مقادیر زیر را می گیرد:

    • بالا - متن با حاشیه بالایی تراز شده است.
    • وسط - در مرکز؛
    • پایین - در امتداد مرز پایین.

    نمونه قالب بندی خط:

    • ;
    • شماره p / p;
    • نام خانوادگی;
    • .

    گزینه های سلول

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

    1. Colspan- پارامتر داده شدهتعداد ستون هایی را که سلول می تواند بپوشاند را مشخص می کند.

    2. Rowspan - قبلاً تعداد ردیف هایی را که این سلول اشغال می کند نشان می دهد.

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

    نتیجه گیری

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

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

    از آزمایش نترسید و به زودی تکنیک ایجاد جداول را به کمال خواهید یافت. موفق باشید!

    یک وظیفه

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

    راه حل

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

    . این عنصر به عنوان محفظه ای برای عناصری که محتویات جدول را تعریف می کنند عمل می کند. هر جدولی شامل ردیف ها و سلول هایی است که به ترتیب با استفاده از تگ ها تنظیم می شوند و
    . جدول باید حداقل دارای یک سلول باشد (مثال 1). به جای برچسب مجاز است از برچسب استفاده کنید . متن در یک سلول با یک برچسب استایل داده شده است ، توسط مرورگر به صورت پررنگ نمایش داده می شود و در مرکز سلول قرار دارد. در غیر این صورت، تفاوت بین سلول ها از طریق برچسب ها ایجاد می شود و نه

    مثال 1: یک جدول ایجاد کنید

    HTML5 IE Cr Op Sa Fx

    برچسب جدول

    سلول 1 سلول 2
    سلول 3 سلول 4


    آرایش سلول ها و شکل ظاهری آنها در شکل نشان داده شده است. یکی

    برنج. 1. نتیجه ایجاد یک جدول با چهار خانه

    ویژگی مرزی تگ

    اضافه کردن فقط با مقدار خالی مجاز است (
    ) یا برابر با 1. تمام مقادیر دیگر اعتبار سنجی را انجام نمی دهند.

    برای کنترل حاشیه های داخل سلول ها از ویژگی padding style استفاده می شود که به انتخابگر td اضافه می شود. فاصله بین سلول‌ها با ویژگی فاصله بین مرزها (مثال 2) که به انتخابگر جدول اضافه شده است، تغییر می‌کند، IE فقط آن را از نسخه 8.0 درک می‌کند.

    مثال 2: حاشیه های درون سلولی

    HTML5 CSS 2.1 IE Cr Op Sa Fx

    برچسب جدول

    سرفصل 1سرفصل 2
    سلول 3سلول 4


    جدول با فیلدها و فاصله بین سلول ها در شکل نشان داده شده است. 2. نتیجه مشابهی را می توان با یک قاب سفید در اطراف سلول ها به دست آورد.

    برنج. 2. فیلدها در سلول های جدول