HTML — مرزهای جدول (Table Borders)

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

مرزهای جدول (Table Borders)

مرز جدول یعنی خط دور خانه ها. با CSS می توانی نوع، رنگ و گوشه ها را عوض کنی. مثل کشیدن جدول در دفتر مشق، اما اینجا با کد انجام می دهیم.

ویژگی «border» یعنی خط دور عنصر. روی table، th و td بگذار.

table, th, td {
  border: 1px solid black;
}

نکته: «solid» یعنی خط یک دست. می توانی ضخامت را هم تغییر دهی.

گاهی مرزها دوتایی می شوند. با «border-collapse: collapse» آن ها یکی می شوند.

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}

اگر رنگ پس زمینه خانه ها را بدهی و رنگ مرز را سفید بگذاری، مرز نامرئی دیده می شود.

table, th, td {
  border: 1px solid white;
  border-collapse: collapse;
}
th, td {
  background-color: #96D4D4;
}

«border-radius» گوشه ها را گرد می کند. مقدار بیشتر، گردی بیشتر.

table, th, td {
  border: 1px solid black;
  border-radius: 10px;
}

نکته: اگر نمی خواهی دور خود جدول خط باشد، فقط روی th و td مرز بگذار.

th, td {
  border: 1px solid black;
  border-radius: 10px;
}

«border-style» شکل خط را تعیین می کند. مثلاً نقطه ای یا خط چین.

th, td {
  border-style: dotted;
}

با «border-color» رنگ خط را عوض کن. مانند ماژیک رنگی دور کادر.

th, td {
  border-color: #96D4D4;
}