دستورالعمل های HyperText Markup Language (HTML) که جداول مستقر در صفحات وب را تشکیل می دهند ، تعداد نسبتاً زیادی پارامتر اضافی را ارائه می دهند. این اجازه می دهد ، برخلاف سایر عناصر بلوک ، اندازه ها را نه تنها با استفاده از زبان CSS (Cascading Style Sheets یا "Cascading Style Sheets") ، بلکه همچنین با استفاده از خود HTML تنظیم کنید.
دستورالعمل ها
مرحله 1
از مشخصه width برچسب جدول برای تعیین عرض جدول بر حسب پیکسل استفاده کنید. جدول برچسب (دستورالعمل HTML) از یک دهانه تشکیل شده است (
) قسمتهایی که بین آنها برچسبهایی وجود دارد که ردیفها و سلولهای جدول را تشکیل می دهند. پارامترهای اضافی (ویژگی ها) را می توان در برچسب باز قرار داد که لیست آنها برای هر برچسب خاص با استانداردهای بین المللی تعیین می شود. برای برچسب جدول ، این استانداردها امکان استفاده از مشخصه width را دارند که عرض جدول را به پیکسل مشخص می کند. کد HTML یک جدول ساده با چنین برچسب تعریف کننده عرض 500 پیکسل می تواند به صورت زیر باشد:
| سلول 1 | سلول 2 |
گام 2
اگر می خواهید عرض جدول را به جای درصد پیکسل تعیین کنید ، به مقدار ویژگی عرض یک نویسه اضافه کنید:
| سلول 1 | سلول 2 |
لطفا توجه داشته باشید که این درصدها لزوماً بر اساس عرض پنجره مرورگر نیستند. ساختار سند در اینجا مهم است - همانطور که یک عروسک تودرتوی تو در تو نمی تواند از عروقی که در آن قرار دارد گسترده تر باشد ، بنابراین 100٪ از عرض جدول نمی تواند از عرض عنصر اصلی بیشتر باشد. به عنوان مثال ، اگر جدول درون یک بلوک div باشد ، عرض این بلوک 100٪ در نظر گرفته می شود.
مرحله 3
اگر می خواهید عرض یکسانی را برای جداول موجود در صفحه وب در یک مکان در کد منبع ایجاد کنید ، از دستورالعمل های زبان توصیف سبک استفاده کنید. برای انجام این کار ، ابتدا در قسمت اصلی کد HTML (بین و) برچسب های باز و بسته که عبارات زبان CSS را محدود می کنند قرار دهید:
/ * دستورالعمل های CSS اینجا خواهد بود * /
سپس CSS زیر را بین آن برچسب ها قرار دهید: table {width: 100px؛} در اینجا ، جدول نشان می دهد که توصیفی که در داخل پرانتزهای حلقه ای قرار داده شده است ، باید بر روی تمام برچسب های جدول موجود در کد صفحه اعمال شود. خوب ، پارامتر width عرض را تنظیم می کند. در اینجا نیز می توانید از عرض نسبی به صورت درصد استفاده کنید.
مرحله 4
اگر لازم است عرض را نه برای همه جداول ، بلکه فقط برای یک یا چند جدول تعیین کنید ، نام کلاس را در کد CSS و در برچسب جدول HTML مشخص کنید. به عنوان مثال ، فرض کنید کلاسی که گروهی از میزهای باریک را مشخص می کند بسیار کوچک است. سپس توصیف سبک آن ممکن است به این شکل باشد: table.tiny {width: 100px؛} و برچسب مربوط به یکی از جداول در کد HTML به این شکل است:
| سلول 1 | سلول 2 |
