نحوه راه اندازی گوشی های هوشمند و رایانه های شخصی پرتال اطلاعاتی
  • خانه
  • سیستم عامل
  • ویژگی html colspan تگ td. استفاده از سلول های ادغام شده به صورت عمودی

ویژگی html colspan تگ td. استفاده از سلول های ادغام شده به صورت عمودی

10.01.17 4.6K

نحوه ترکیب سلول ها در جدول HTML به صورت افقی

هنگام ایجاد جداول در HTML، گاهی اوقات لازم است سلول ها به صورت افقی ادغام شوند.

در یک جدول HTML، هر سلول توسط مجموعه ای از برچسب ها محدود می شود وکه محتوا بین آنها قرار می گیرد. اگر به تگ اضافه نکنید ویژگی های اضافی یا سبک های CSS، سپس هر سلول به طور پیش فرض دقیقاً یک ستون را اشغال می کند.

برای الحاق سلول های HTML، باید سلول های کمتری نسبت به بقیه خطوط به خط اضافه کنید و اضافه کنید. ویژگی colspan= "" داخل تگ سلولی که باید کشیده شود

یک مثال ساده از یک جدول HTML با دو سطر و دو ستون (چهار سلول) را در نظر بگیرید. HTML آن به شکل زیر است:

محتوامحتوا
محتوامحتوا

محتوا
محتوامحتوا

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

شما می توانید سلول ها را ادغام کنید جداول HTMLدر هر یک از مناطق آن با هر تعداد ستون. یکی از مفیدترین کاربردهای ادغام سلول های افقی ایجاد هدر جدول است. اگر جدول دارای n ستون است، ویژگی colspan = "n" را در اولین خانه ردیف بالا قرار دهید و سلول های دیگر را از آن ردیف حذف کنید.

نحوه ادغام سلول ها در جدول HTML به صورت عمودی: rowspan

ویژگی rowspan = "" به شما امکان می دهد سلول ها را به صورت عمودی ادغام کنید

اگر می خواهید سلول چندین ردیف را در بر بگیرد، ویژگی rowspan = "" را داخل تگ اضافه کنید. سلول به صورت عمودی کشیده شود. در هر ردیف زیر ردیفی که سلول کشیده شده شروع می شود، باید یک سلول را حذف کنید تا جدول تراز شود. به عنوان مثال، هنگامی که یک سلول را به سه ردیف کشیده می‌کنید، باید هر بار یک سلول را در دو ردیف بعدی حذف کنید.

یک مثال ساده از یک جدول HTML با چهار سلول را در نظر بگیرید که به دو سطر و دو ستون تقسیم شده است. کد HTML:

محتوامحتوا
محتوامحتوا

برای انجام جدول HTMLسلول ها را به صورت عمودی ادغام کنید، برای سلول اول اضافه کنید خط بالاییویژگی rowspan = "2" و سپس یکی از سلول های ردیف پایین را حذف کنید. کد HTML اکنون به شکل زیر خواهد بود:

چیزمحتوا
محتوا

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

روش هایی برای ترکیب rowspan و colspan برای ایجاد جداول HTML سفارشی با سلول هایی که چندین ردیف و ستون را در بر می گیرند.

دهانه 3 ردیف دهانه 3 ستون
اچ تی دهانه 2 ردیف
م L
دهانه 4 ستون
دهانه 2 ردیف و 2 ستون تی
آ
E L ب

استفاده از سلول های ادغام شده به صورت عمودی

ادغام سلول ها توسط عمودی های HTMLدر یک ستون می‌تواند زمانی استفاده شود که می‌خواهید یک هدر برای گروهی از ردیف‌های مجاور آن ستون ایجاد کنید. همچنین می تواند به جداسازی گروه هایی از خطوط بر اساس نوع کمک کند.

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

میز 1
بهتر است ساده شروع کنید و در عین حال به یاد داشته باشید که سلول ها و ردیف ها چگونه تنظیم می شوند.
یک کار آسان. که علامت زدم به رنگ آبی(شاید کسی آن را آبی صدا کند - مهم نیست). فقط دو خط در آن وجود دارد. اولی روی پنج ستون کشیده شده است، دومی از همین ستون ها تشکیل شده است. اینجاست که صفت بسیار ارزشمند «Colspan» به میان می آید.
صفت کلسپنتعداد ستون ها را برای کشش این سلول تنظیم می کند.
ما به آن مقدار پنج می دهیم: Colspan = "5". و اولین سلول ما به عرض پنج خانه ستون کشیده شده است خط بعدی... کل کد صفحه به شکل زیر خواهد بود:

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

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

چرا در این مورد با جزئیات می نویسم؟ برای اینکه بلافاصله و مطمئناً به خاطر بسپارید: هر خط باید یک شروع و یک پایان داشته باشد! این ابتدا و انتهای خط با برچسب ها نشان داده می شوند

جدول 2
اکنون در نظر بگیرید که با رنگ نارنجی روشن (یا نارنجی کثیف - زیرا برای هر کسی راحت تر است) نشان داده شده است. به نظر می رسد جدول 1، اما من یک ردیف دیگر (3) اضافه کرده ام، که شامل یک سلول است، همچنین به عرض پنج خانه در ردیف دوم کشیده شده است. کد جدول به شکل زیر است:

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

با سلام خدمت خوانندگان عزیز سایت وبلاگ. مقاله دیگری را مورد توجه شما قرار می دهم که به چیستی یک جدول در Html، چه تگ هایی برای ایجاد آن (Tr، Th، Td، Table، Colspan، Cellpadding، Cellspacing)، نحوه تنظیم پس زمینه و حاشیه ها اختصاص داده خواهد شد. برای آن، و خیلی بیشتر.

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

حتی ساده ترین درج کد شمارنده ضربه ممکن است شما را ملزم به درک اصول ساخت جداول در html کند. اجازه دهید به شما یادآوری کنم که ما قبلاً موفق شده ایم و همچنین.

جداول در Html - عناصر جدول، Tr، Th، Td

حالا چیدمان جدول با ظهور CSS در پس‌زمینه محو شده است، اما با این وجود، راحت‌ترین راه برای ارائه اطلاعات هنوز هم جدول خوب قدیمی است و هنوز باید برچسب‌های اصلی آن را بشناسید.

پیش از این، حتی قبل از معرفی CSS، وب مسترها به هیچ وجه نمی توانستند بدون آنها کار کنند، زیرا کل چیدمان سایت ها بر اساس آنها بود. ما نه تنها از برچسب های اصلی Table، Tr، Th و Td، بلکه از کل مجموعه غنی عناصر کمکی (Col، Tbody، Caption، Rowspan، Colspan و غیره) استفاده کردیم. شما هنوز هم می توانید در سایت های اینترنتی و انجمن های ایجاد شده بر اساس طرح جدول پیدا کنید، که می تواند به عنوان یک انگیزه اضافی برای شما برای یادگیری اصول ساخت آنها باشد.

جداول در زبان Html یک عنصر خاص هستند، زیرا در اصل عنصر Table یک عنصر بلوکی است، اما در عین حال مانند سایر عناصر بلوک، تمام فضای موجود را از نظر عرض اشغال نمی کند. از نظر عرض، فقط فضای مورد نیاز برای قرار دادن محتوا را اشغال می کند - نه بیشتر، نه کمتر.

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

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

اما در حال حاضر در داخل Tr، سلول ها با استفاده از Td ایجاد می شوند. آنها همچنین می توانند با استفاده از Th ایجاد شوند، و تفاوت بین این سلول ها با سلول هایی که با استفاده از عناصر Td ایجاد شده اند، کاملا بصری خواهد بود. از نظر عملکردی، عناصر Td و Th به یک شکل کار می کنند.

اما محتوای (محتوای) سلول ایجاد شده با تگ Td به صورت تراز باقی می ماند و محتوای سلول ایجاد شده با تگ Th در مرکز و همچنین در فونت استفاده شده پررنگ می شود. خود عناصر Th دقیقاً برای ارائه عناوین ستون و ردیف برای جداول معرفی شدند.

و در داخل سلول های Td یا Th است که محتوا وجود دارد. هر چیزی که در صفحه وب در داخل جدول می بینید دقیقاً در داخل سلول هایی قرار می گیرد که با باز و بسته شدن تگ های Td یا Th تشکیل می شوند:

اما به خودی خود، ایجاد صفحات خط به خط رخ می دهد - Tr را باز کنید و سپس Tr را ببندید. چند جفت از این عناصر Tr دارید، چند ردیف دریافت می کنید. چند ستون خواهد بود؟

دقیقاً به همان تعداد که در هر ردیف (Tr) سلول (Td یا Th) ایجاد می کنید. اگر می خواهید یک صفحه ساده و متقارن بسازید (تصویر بالا را ببینید)، باید تعداد سلول ها (Td یا Th) در هر خط را یکسان کنید.

بنابراین، جداول در Html خط به خط تشکیل می شوند - Tr مسئول تشکیل ردیف ها، و Td یا Th مسئول تشکیل ستون ها هستند. آنچه قابل توجه است، در داخل Td یا Th، می توانید مطلقاً هر محتوا را وارد کنید - متن، عناصر درون خطی یا بلوک (، تصاویر با کمک، عنوان، پاراگراف) و غیره.

که معلوم می شود که نمی تواند جدولی در کد Html وجود داشته باشد که از کمتر از سه عنصر تشکیل شده باشد - Table، Tr، Td (یا Th).

جدول - عنصر اصلی جدول

بیایید با نگاه کردن به تگ Table شروع کنیم، یعنی ویژگی هایی که دارد:

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

زیرا جدول یک عنصر بلوکی است که به دنبال اشغال تمام فضای موجود در عرض نیست، به این معنی که می توانیم با استفاده از ویژگی، تراز افقی را برای تگ جدول اعمال کنیم. تراز کردن.

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

با استفاده از ویژگی Width، می توانید عرض جدول را تنظیم کنید و می توانید از مقادیر مطلق در پیکسل و مقادیر نسبی در درصد استفاده کنید (100٪ با کل فضای موجود در عرض مطابقت دارد).

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



ویژگی های زیر از تگ Table مسئول پس زمینه جدول ما هستند - این عناصر Bgcolor و Background هستند. همانطور که احتمالاً به یاد دارید، با کمک Background (که اتفاقاً فقط در برچسب Body و عناصر - Table، Tr، Th یا Td استفاده می شود)، می توانید هر تصویری را از فایل به عنوان پس زمینه، مسیر انتخاب کنید. که به عنوان یک مقدار این ویژگی مشخص خواهد شد.

این تصویر، مانند یک کاشی، کل صفحه وب (در مورد تگ Body) یا کل جدول (در مورد جدول) را پوشش می دهد، به عنوان مثال، مانند این:

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

حرکت کن در ردیف بعدی یک ویژگی داریم مرز، که وظیفه تشکیل قاب را بر عهده دارد. در توضیح ترسیم فریم ها ظرافت هایی وجود دارد، اما برای سادگی می توان گفت که فریم در اطراف سلول ها و اطراف خود جدول کشیده می شود. در Border قادر خواهید بود ضخامت این حاشیه را بر حسب پیکسل تنظیم کنید. به طور پیش فرض، هیچ حاشیه ای رسم نمی شود (حاشیه = 0).

اما باید در نظر داشت که در Html قاب میز برجسته می باشد. رنگ‌های سمت روشن و تاریک را خواهد داشت که گویی از نوری که از گوشه بالای صفحه می‌افتد به نظر می‌رسد. در این زمینه باید در نظر داشت که در Border عرض کل حاشیه را تعیین نمی کنید. دو طرف روشن و تاریک به این ضخامت اضافه خواهد شد. در کل کمی گیج کننده است اما باید با یک مثال به آن نگاه کرد.

با عنصر Table، فرض می کنیم کارمان تمام شده است و زمان آن رسیده است که به مورد بعدی برویم. ویژگی Tr این است که صرفاً سرویس است و در صفحه وب قابل مشاهده نیست. در هسته خود، Tr یک ظرف نامرئی برای Td یا Th است که در آن قرار خواهد گرفت.

Tr - عنصر ردیف جدول در Html

با استفاده از تگ Tr به سادگی تمام سلول های محصور در آن (Td یا Th) را در یک خط قرار می دهیم و تمام، خود Tr قابل مشاهده نیست. یک نتیجه گیری مهم از این نتیجه می شود - تمام ویژگی های این برچسب به طور خاص برای سلول های محصور در این ظرف اعمال می شود. در حال حاضر بیشترین استفاده از ویژگی های Tr در شکل نشان داده شده است:

تراز کردن در آن به همان روشی که برای پاراگراف‌ها یا عنوان‌ها انجام می‌شود، محتوای تمام سلول‌ها (Td یا Th) یک ردیف معین (Tr) در سمت چپ یا راست یا به مرکز تراز می‌شود.

Valign تراز عمودی محتوا را در تمام سلول های (Td یا Th) ردیف داده شده (Tr) تنظیم می کند. مقادیر Top، Middle و Bottom تراز را به ترتیب در بالا، وسط و پایین تنظیم می کنند. تراز پیش فرض در وسط ارتفاع - وسط است.

مقدار Baseline تراز متن را در Td یا Th خط داده شده با خط پایه فونت ها مشخص می کند. وقتی متن شما در سلول‌های مختلف دارای اندازه‌های فونت متفاوتی باشد، این می‌تواند راحت باشد، و هم‌ترازی Baseline در Valign چنین جدولی را برای خوانندگان قابل استفاده‌تر می‌کند (به نظر من):

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

همچنین می توانید از ویژگی Bgcolor در تگ Tr استفاده کنید و این خطوط را با رنگ پس زمینه مورد نظر خود پر کنید. که تمام سلول های این خط با رنگ دلخواه شما پر می شوند:

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

Td یا Th - عناصر سلول های جدول در Html

خب، حالا بیایید به مهم ترین عنصر برویم - سلول، یعنی به ویژگی های تگ های Td و Th، که هنوز هم استفاده می شوند:

Align و Valign در تگ‌های Td یا Th به مرورگر می‌گویند که محتوا چگونه باید در عرض و ارتفاع تراز شود و نه در کل خط، همانطور که اخیراً در نظر گرفتیم. علاوه بر این، ویژگی های یک سلول خاص نسبت به ویژگی های مشابه یک ردیف اولویت دارند.

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

Widht و Height به شما این امکان را می دهند که ارتفاع و عرض سلول را هم بر حسب پیکسل و هم به صورت درصد (در عرض) تنظیم کنید. Bgcolor و Background در عناصر Html Td یا Th به شما این امکان را می دهند که یک پس زمینه جداگانه (به شکل یک رنگ یا یک تصویر) برای هر سلول خاص تنظیم کنید:

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

خوب، در اینجا ما با ویژگی های بسیار جالب و مهمتر از همه مفید - Colspan و Rowspan هستیم. منظورشان پوشش است. Rowspan دهانه خط و Colspan دهانه ستون است. آنها به ترتیب برای ترکیب سلول ها در یک ستون یا در یک ردیف خدمت می کنند.

اگر می خواهید چندین خانه را در یک ستون جدول ترکیب کنید، باید از Rowspan استفاده کنید، زیرا شما چندین خط را با یک سلول می گذرانید. و اگر می خواهید چندین سلول را در یک ردیف ترکیب کنید، باید از Colspan استفاده کنید، زیرا برای گسترش یک سلول به چندین ستون نیاز دارید.

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

عنوان - شرح جدول

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

موقعیت عنوان را می توان با استفاده از ویژگی Align تنظیم کرد. مقادیر Top و Bottom به ترتیب موقعیت هدر را در بالا و پایین جدول تعیین می کنند. مقادیر Left و Right اکنون استفاده نمی شوند، زیرا در مرورگرهای مختلف کاملاً متفاوت عمل می کند. بهتر است آنها را فراموش کنیم. آن ها به طور کلی، عنوان فقط در زیر علامت یا بالای آن یافت می شود (این مقدار به طور پیش فرض استفاده می شود):

به طور کلی، می توانید بلوک دیاگرام زیر را از ساخت و ساز ارائه دهید:

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

برای شروع تگ Table افتتاحیه را می نویسیم و بلافاصله بعد از آن تگ خط اول Tr را باز می کنیم. خط اول جدول آینده ما شامل یک سلول است که همزمان دو ستون را در بر می گیرد، بنابراین ویژگی Colspan = 2 باید به تگ این سلول اضافه شود:

در مرحله بعد تگ خط اول (Tr) را می بندیم و تگ خط بعدی را که از قبل دارای دو خانه است باز می کنیم. سلول اول ردیف دوم غیرقابل توجه است و از تگ های قطع یا بسته معمولی Td یا Th تشکیل می شود که محتوای آن بین آنها محصور می شود.

اما سلول دوم خط دوم قابل توجه است، زیرا به طور همزمان دو خط را در بر می گیرد و بنابراین باید ویژگی Rowspan = 2 را به تگ آن اضافه کنیم:

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

خوب، حالا بیایید همه اینها را در یک کد ترکیب کنیم و ببینیم چه اتفاقی می‌افتد:

در واقع، همانطور که ما برنامه ریزی کرده بودیم. واضح است که در اینجا هیچ چیز پیچیده ای وجود ندارد - کافی است منطق عملکرد ویژگی های Colspan و Rowspan را درک کنید.

طرح بندی جدولی (منسوخ شده).

حالا بیایید در مورد مفهومی مانند طرح بندی جدول صحبت کنیم و اینکه چرا آنها دقیقاً در غیاب CSS (البته اکنون در همه جا) به ابزار اصلی زبان نشانه گذاری فرامتن تبدیل شدند. نکته این است که فقط جداول این امکان را به شما می دهد که به سادگی و انعطاف پذیری مشکل اصلی در طرح بندی سایت را حل کنید - قرار دادن عناصر بلوک در یک ردیف در کد Html.

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

اولین مورد شامل تجویز اولین جداول با ویژگی Align با مقدار Left به تگ Table است که در نتیجه دومی قبلاً در سمت راست جدول اول قرار می گیرد و در مقابل آن قرار می گیرد. با ثبت نام Align = چپ و دومی در تگ Table، می‌توانیم سه قطعه را در یک ردیف قرار دهیم.

اما راه اول به ما اجازه نمی دهد که آنها را از یکدیگر دور کنیم، زیرا در آن زمان هنوز از CSS استفاده نمی شد. بنابراین، راحت‌ترین راه برای قرار دادن چندین جدول (یا هر عنصر بلوک دیگر) در یک ردیف، ایجاد یک جدول با یک ردیف (Tr) و تعداد سلول‌های مورد نیاز (Td یا Th) متناسب با تعداد بلوک‌ها بود. عناصری که باید در یک ردیف قرار دهیم.

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

اکنون تمام ویژگی هایی که در بالا توضیح داده شد را می توان برای عناصر Html واقع در سلول های جدولی که ایجاد کرده ایم، هم برای تگ های Tr و هم برای تگ های Td یا Th اعمال کرد. قرار دادن محتوا در سلول ها، تنظیم تورفتگی های لازم، پر کردن پس زمینه و غیره امکان پذیر خواهد بود.

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

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

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

Tbody، Thead و Tfoot - ظروف برای ردیف‌ها در جدول Html

اما بیایید دوباره به رم‌های خود برگردیم و چند عنصر دیگر را در نظر بگیریم که قبلاً (زمانی که هنوز CSS وجود نداشت) اجازه می‌دادند تا خصوصیات را به‌طور هم‌زمان برای تعداد زیادی ردیف در تگ Table تنظیم کنیم. Tr خود ظروف نامرئی برای Td یا Th هستند، اما سه نوع دیگر از ظروف وجود دارد که به نوبه خود به عنوان ظرف برای Tr عمل می کنند.

با کمک آنها می توانیم خصوصیات گروه بزرگی از خطوط را به طور همزمان تنظیم کنیم، به عنوان مثال، آنها را با پس زمینه پر کنیم، تراز مورد نظر را تعیین کنیم و غیره. من در مورد عناصری مانند Thead (برای هدر)، Tbody (برای محتوا) و Tfoot (برای پایان آن) صحبت می کنم. هنگام ایجاد جدول، ابتدا گروهی از خطوط مربوط به هدر (محصور در تگ های Thead) نوشته می شود، سپس گروهی از خطوط مربوط به انتهای آن (Tfoot) و تنها سپس گروهی از خطوط مربوط به محتوای اصلی آن (Tbody) نوشته می شود. .

در جدول Html قسمت Thead فقط یک بار قابل ثبت است یا اصلا وجود ندارد. همین امر در مورد ظرفی از عناصر Tfoot نیز صدق می کند. اما حداقل یک بخش Tbody باید وجود داشته باشد.

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

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

اما شما می توانید همه این هزاران خط را در یک ظرف Tbody محصور کنید و ویژگی مورد نیاز را با تراز مورد نیاز فقط در آن بنویسید. این می تواند تا حد زیادی کد Html را از تکرارهای غیر ضروری خلاص کند. به طور کلی، عناصر Tbody، Thead و Tfoot را می توان در جداول ساده نادیده گرفت، اما استفاده از آنها همچنان در جداول پیچیده حتی امروزه که ابزار قدرتمندی مانند CSS وجود دارد، مرتبط است.

Col - عرض ستون های جدول را تنظیم کنید

Col و Colgroup اکنون تقریباً تأثیر یکسانی دارند، بنابراین بیایید در مورد استفاده از آنها با استفاده از عنصر Col به عنوان مثال صحبت کنیم. برای تنظیم راحت عرض ستون ها و ردیف ها لازم است. Col دارای دو ویژگی اصلی Span و Width است که به شما امکان می دهد عرض متفاوتی را برای تمام ستون های محصور شده در تگ های Col تنظیم کنید.

Span با تعیین تعداد ستون هایی که عرض مشخص شده در Width برای آنها اعمال می شود، دهانه (اندازه ظرف) را تنظیم می کند. به عنوان مثال، مانند این:

آن ها برای دو ستون اول جدول، عرض را روی 50 پیکسل، برای ستون سوم - 200 پیکسل و برای دو ستون باقی مانده - هر کدام 100 پیکسل تنظیم کردم. به نظر من همه چیز بسیار ساده و سرراست است. اما در واقع، عرض ستون های مشخص شده از طریق عناصر Col، فقط اعلان شما هستند، زیرا وقتی اندازه پنجره مرورگر تغییر می کند، عرض ستون ها تغییر می کند.

موفق باشی! به زودی شما را در صفحات سایت وبلاگ می بینیم

با رفتن به اینجا می توانید ویدیوهای بیشتری را تماشا کنید
");">

ممکن است علاقه مند باشید

انتخاب، Option، Textarea، Label، Fieldset، Legend - تگ های Html از فرم کشویی و جعبه متنی
نحوه تنظیم رنگ ها در کد Html و CSS، انتخاب سایه های RGB در جداول، Yandex و سایر برنامه ها
MailTo - چیست و چگونه می توان یک پیوند در Html برای ارسال ایمیل ایجاد کرد
فرم های Html برای سایت - برچسب های Form، Input و Select، Option، Textarea، Label و موارد دیگر برای ایجاد عناصر فرم های وب

مقالات مرتبط برتر