HTML — ستون (col)

آخرین بروزرسانی: 1404/08/07

قبلی: کد (code) بعدی: گروه ستون (colgroup)

ستون (col)

تگ «ستون (col)» برای تنظیم ویژگی های «ستون جدول» است. این تگ فقط داخل «گروه ستون ها (colgroup)» می آید. با آن، یک باره به کل ستون استایل می دهی؛ مثل بازی که با یک حرکت، همه خانه های عمودی رنگ می شوند.

نمونه سریع تگ col داخل colgroup

&lt;table&gt;
  &lt;colgroup&gt;
    &lt;col span="2" style="background-color:red"&gt;
    &lt;col style="background-color:yellow"&gt;
  &lt;/colgroup&gt;
  &lt;tr&gt;
    &lt;th&gt;ISBN&lt;/th&gt;
    &lt;th&gt;Title&lt;/th&gt;
    &lt;th&gt;Price&lt;/th&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;3476896&lt;/td&gt;
    &lt;td&gt;My first HTML&lt;/td&gt;
    &lt;td&gt;$53&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;

مشاهده در ادیتور

ویژگی span در تگ col

ویژگی «span» یعنی «چند ستون را پوشش بده». مثلاً span="2" یعنی این col روی دو ستون پشت سرهم اعمال می شود. بنابراین، سریع تر استایل می دهی و کدت تکراری نمی شود.

نکته: برای ساختار جدول اول از تگ table استفاده کن، سپس تگ colgroup را اضافه کن، بعد تگ های col را تعریف کن.

نمایش پیش فرض مرورگرها

col {
  display: table-column;
}

مشاهده در ادیتور

گام های عملی

یک جدول ساده بساز.
داخلش یک <colgroup> اضافه کن.
تگ های <col> را با span و style تنظیم کن.

هشدار: تگ <col> بیرون از <colgroup> کارایی ندارد. همیشه آن را داخل <colgroup> قرار بده.

جمع بندی سریع

تگ <col> برای استایل ستون هاست.
همیشه داخل <colgroup> می آید.
با span چند ستون را پوشش بده.
کد تمیزتر و تکرار کمتر می شود.