با سلام خدمت خوانندگان عزیز سایت وبلاگ. مقاله دیگری را مورد توجه شما قرار می دهم که به چیستی یک جدول در 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 e، که از کمتر از سه عنصر تشکیل شده است - جدول، Tr، Td (یا Th).
جدول - عنصر اصلی جدول
بیایید با نگاه کردن به تگ Table شروع کنیم، یعنی ویژگی هایی که دارد:
در واقع، اینها همه ویژگی ها نیستند، بلکه مرتبط ترین و مورد استفاده ترین آنها هستند این لحظه... بیشترین اطلاعات دقیقبا انواع ویژگی های تگ Table و همچنین هر عنصر دیگری.
زیرا جدول یک عنصر بلوکی است که به دنبال اشغال تمام فضای موجود در عرض نیست، به این معنی که می توانیم اعمال کنیم تراز افقیبه تگ Table با استفاده از ویژگی تراز کردن.
اما همه چیز در اینجا چندان ساده نیست، زیرا استفاده از مقادیر چپ و راست در Align منجر به تراز کردن صفحه ما در لبه چپ یا راست نمی شود، بلکه باعث می شود متنی در اطراف آن بپیچید، کاملاً مشابه آنچه دیدیم. آن در. خوب، اگر از مقدار Center برای Align استفاده کنید، بدون هیچ گونه پوششی در مرکز قرار می گیرد.
از طريق ویژگی عرضمی توانید عرض جدول را تنظیم کنید، در حالی که می توانید از مقادیر مطلق در پیکسل و نسبی در درصد استفاده کنید (100٪ با همه مطابقت دارد فضای موجوددر عرض).
برو جلو. پوشش سلولیبه شما امکان می دهد تورفتگی محتوا را در سلول ها (Td یا Th) از لبه های آن (در هر چهار طرف به طور همزمان) تنظیم کنید و Cellspacing به شما امکان می دهد فاصله بین سلول های جدول مجاور را بر حسب پیکسل تنظیم کنید (پیش فرض دو پیکسل است) . من فکر می کنم که ایده واضح است، اما با این وجود نشان دادن این موضوع با یک مثال واضح تر خواهد بود:
ویژگی های زیر از تگ Table مسئول پس زمینه جدول ما هستند - این عناصر Bgcolor و Background هستند. همانطور که احتمالاً به یاد دارید، با کمک Background (که اتفاقاً فقط در برچسب Body و عناصر - Table، Tr، Th یا Td استفاده می شود)، می توانید هر تصویری را از فایل به عنوان پس زمینه، مسیر انتخاب کنید. که به عنوان یک مقدار این ویژگی مشخص خواهد شد.
این تصویر، مانند یک کاشی، کل صفحه وب را پوشش می دهد (در صورت برچسب بدنه) یا کل جدول (در مورد جدول)، به عنوان مثال، مانند این:
هنگام استفاده از ویژگی 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 باشد و نباید هیچ عنصر بلاکی در آن وجود داشته باشد.
موقعیت زیرنویس را می توان با استفاده از آن تنظیم کرد صفت تراز کردن... مقادیر Top و Bottom به ترتیب موقعیت هدر را در بالا و پایین جدول تعیین می کنند. مقادیر Left و Right اکنون استفاده نمی شوند، زیرا کار کاملا متفاوت در مرورگرهای مختلف... بهتر است آنها را فراموش کنیم. آن ها بر روی هم رفتهعنوان می تواند فقط زیر علامت یا بالای آن قرار گیرد (این مقدار به طور پیش فرض استفاده می شود):
V مورد کلی، می توانید بلوک دیاگرام زیر را از ساختار ارائه دهید:
حالا بیایید مثالی بزنیم که چگونه می‌توانید یک جدول با سلول‌هایی با اندازه‌های مختلف ایجاد کنید، که برخی از آنها چندین ستون یا ردیف را در بر می‌گیرند. همانطور که کمی قبل با شما گفتیم، آنها خط به خط در 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 به عنوان مثال صحبت کنیم. برای تنظیم راحت عرض ستون ها و ردیف ها لازم است. کل دارای دو اصلی است ویژگی 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 و موارد دیگر برای ایجاد عناصر فرم های وب
رایج ترین استفاده از جداول پیچیده علامت گذاری یک صفحه وب است. به تصویر نگاه کنید:
معلوم می شود که ما به یک ستون در ردیف اول و سوم نیاز داریم. این با استفاده از پارامتر به دست می آید کلسپنبرچسب زدن
برای مثال،
برای مثال ما:
عنوان سند
| سربرگ سایت | |
| منو | محتوا |
| پایین سایت | |
توجه داشته باشید که سطر اول و سوم هر کدام دارای یک ستون هستند.
مثال دیگری از نشانه گذاری برای یک صفحه وب را در نظر بگیرید:
| سربرگ سایت | |||||
| منو | منو | منو | منو | منو | منو |
| اخبار | محتوا | ||||
تعداد - چند سطر و ستون در این جدول وجود دارد؟ برای انجام این کار، به صورت ذهنی یک شبکه را به نقاشی تحمیل کنید. نتیجه سه ردیف و شش ستون است.
سطر اول از یک ستون شامل شش ستون تشکیل شده است. بیایید این را بنویسیم:
ردیف دوم دارای شش ستون است:
ردیف سوم از دو ستون تشکیل شده است، علاوه بر این، اولین شامل دو ستون، و دوم - چهار:
آنقدرها هم سخت نیست. ما به صورت بصری یک شبکه را بر روی نقاشی تحمیل می کنیم و خطوط را به نوبه خود از بالا به پایین می نویسیم و تعداد ستون های مورد نیاز در هر کدام را توصیف می کنیم.
برچسب پهنای ردیف - ردیف‌ها را به هم متصل می‌کند
اگر به این نوع نشانه گذاری نیاز داشته باشیم چه می شود؟
لطفاً توجه داشته باشید که در ردیف دوم ما فقط یک ستون داریم ستون اول از ردیف اول امتداد دارد، فقط شامل دو ردیف است.
در نگاه اول، ممکن است پیچیده به نظر برسد، در واقع کمی تمرین و جداول با هر پیچیدگی ایجاد خواهید کرد.
بیایید مثال دیگری بزنیم:
| کلاه لبه دار | منو |
| محتوا | |
| پایین سایت | |
بنابراین در سطر اول دو ستون داریم که ستون دوم دو سطر را به هم می پیوندد. بیایید این را بنویسیم:
ردیف دوم یک ستون است (فقط بخشی از آن توسط ستون دوم ردیف اول پنهان می شود):
در نهایت، ردیف سوم یک ستون است که شامل سه ستون است:
با استفاده از این دو پارامتر طول ردیفو کلسپنمی توانید جداول با هر پیچیدگی ایجاد کنید. تمرین.
میزهای تو در تو
همانطور که از نام آن پیداست، یک جدول را می توان در جدول دیگر قرار داد، اما می توان آن را در هر ستونی قرار داد. بیایید این کار را با استفاده از آخرین نشانه گذاری خود به عنوان مثال انجام دهیم.
بنابراین، ما کد زیر را داریم.
10.01.17 4.6Kنحوه ترکیب سلول ها در جدول HTML به صورت افقی
هنگام ایجاد جداول در HTML، گاهی اوقات لازم است سلول ها به صورت افقی ادغام شوند.
در یک جدول HTML، هر سلول توسط مجموعه ای از برچسب ها محدود می شود
برای الحاق سلول های 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". و اولین سلول ما به عرض پنج خانه ستون کشیده شده است خط بعدی... کل کد صفحه به شکل زیر خواهد بود:
