عرض مصدر CSS/table-layout

<noinclude>{{DISPLAYTITLE:الخاصية <code>table-layout</code>}}</noinclude>
الخاصية <code>table-layout</code> في CSS تُحدِّد الخوارزمية التي تُستخدم لضبط تخطيط خلايا وأسطر وأعمدة الجداول <code>[[HTML/table|<nowiki><table></nowiki>]]</code>.

== بطاقة الخاصية ==
{| class="wikitable" style="width: 100%;"
|-
! scope="row" style="width: 20%;" |[[CSS/initial value|القيمة الابتدائية]]
|<code>auto</code>
|-
! scope="row" |تُطبَّق على
|عناصر <code>table</code> و <code>inline-table</code>.
|-
! scope="row" |قابلة للوراثة
|نعم
|-
!قابلة للحركة
|لا
|-
! scope="row" |القيمة المحسوبة
|كما حُدِّدَت.

|}

<syntaxhighlight lang="css">
/* كلمات محجوزة */ 
table-layout: auto;
table-layout: fixed;

/* القيم المحجوزة */
table-layout: inherit;
table-layout: initial;
table-layout: unset;
</syntaxhighlight>

== أمثلة ==

=== القيمة <code>fixed</code> ===
التخطيط الأفقي للجدول لن يعتمد على محتوى الخلايا، وإنما على عرض الجدول، وعرض الأعمدة، والإطار <code>[[CSS/border|border]]</code> والتباعد بين الخلايا <code>[[CSS/border-spacing|border-spacing]]</code>.

يمكن تحديد عرض الجدول باستخدام الخاصية <code>[[CSS/width|width]]</code>، وإذا لم تُحدِّد العرض '''فسيستخدم المتصفح التخطيط auto تلقائيًا'''.

إذا لم تُحدِّد عرض أي عمود من أعمدة الجدول، فسيكون عرضها متساويًا، بغض النظر عن المحتوى الموجود فيها:<syntaxhighlight lang="html">
<div class="container">
  <table>
    <caption><small>عرض الجدول مضبوط إلى 814px، وعرض الأعمدة <strong>ليس</strong> مُحدَّدًا.</small></caption>
    <tr>
      <td>محتويات أوّل خلية في أوّل عمود</td>
      <td>محتوى ثاني خلية</td>
    </tr>
    <tr>
      <td>محتوى ثالث خلية</td>
      <td>رابع خلية</td>
    </tr>
  </table>
</div>
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">
.container {
  margin: 40px auto;
  width: 800px;
}

table,
td,
th {
  padding: 1em;
  border: 1px solid #ddd;
  text-align: left;
}

table {
  table-layout: fixed;
  width: 814px;
  background-color: white;
}

caption {
  caption-side: bottom;
  font-style: italic;
}
</syntaxhighlight>إذا حددت عرض الأعمدة فسيستخدم ذاك العرض، وإذا كان مجموع عرض الأعمدة (مع عرض التباعد بين الخلايا والإطار) أكبر من عرض الجدول (المضبوط عبر الخاصية <code>width</code>) فسيزداد عرض الجدول؛ أما إذا كان الجدول أعرض من الأعمدة، فستوزَّع المسافة الزائدة على الأعمدة.<syntaxhighlight lang="html">
<div class="container">
  <table>
    <caption><small>عرض الجدول مضبوطٌ إلى 814px، ومجموع عرض الأعمدة أقل من عرض الجدول، لذا ستوزع المسافة الباقية على الأعمدة بالتساوي.</small></caption>
    <tr>
      <td class="col-1">عرض هذا العمود مضبوطٌ إلى 200px.</td>
      <td class="col-2">عرض هذا العمود مضبوطٌ إلى 300px.</td>
    </tr>
    <tr>
      <td>محتوى ثالث خلية</td>
      <td>رابع خلية</td>
    </tr>
  </table>
</div>

<div class="container container-2">
  <table>
    <caption><small>عرض الجدول مضبوطٌ إلى 814px، ومجموع عرض الأعمدة أكبر من عرض الجدول، لذا سيزداد عرض الجدول.</small></caption>
    <tr>
      <td class="col-1">عرض هذا العمود مضبوطٌ إلى 600px.</td>
      <td class="col-2">عرض هذا العمود مضبوطٌ إلى 300px.</td>
    </tr>
    <tr>
      <td>محتوى ثالث خلية</td>
      <td>رابع خلية</td>
    </tr>
  </table>
</div>
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">
.container {
  margin: 40px auto;
  width: 800px;
}

table,
td,
th {
  padding: 1em;
  border: 1px solid #ddd;
  text-align: left;
}

table {
  table-layout: fixed;
  width: 814px;
  background-color: white;
}

caption {
  caption-side: bottom;
  font-style: italic;
}

.col-1 {
  width: 200px;
}

.col-2 {
  width: 300px;
}

.container-2 .col-1 {
  width: 600px;
}

.container-2 .col-2 {
  width: 300px;
}
</syntaxhighlight>
=== القيمة <code>auto</code> ===
سيعطى عرض الجدول حسب عرض الأعمدة المكوِّنة له، ويُحدَّد عرض العمود حسب أكثر محتوى عرضًا فيه ما لم يُحدَّد العرض باستخدام الخاصية <code>[[CSS/width|width]]</code>.

عندما لا يكون عرض الجدول محددًا، فسيساوي مجموع عرض الأعمدة الموجودة فيه، والتي يكون عرض كل واحدٍ منها يعتمد على محتوى الخلايا الموجودة فيها:<syntaxhighlight lang="html">
<div class="container">
  <table>
    <caption><small> عرض الجدول <strong>ليس</strong> محددًا، وعرض الأعمدة <strong>ليس</strong> مُحدَّدًا.</small></caption>
    <tr>
      <td>محتويات أوّل خلية في أوّل عمود</td>
      <td>محتوى ثاني خلية</td>
    </tr>
    <tr>
      <td>محتوى ثالث خلية</td>
      <td>رابع خلية</td>
    </tr>
  </table>
</div>
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">
.container {
  margin: 40px auto;
  width: 800px;
}

table,
td,
th {
  padding: 1em;
  border: 1px solid #ddd;
  text-align: left;
}

table {
  background-color: white;
  table-layout: auto;
}

caption {
  caption-side: bottom;
  font-style: italic;
}
</syntaxhighlight>يمكنك تحديد عرض للجدول، وإذا لم يكن هنالك عرضٌ محدد للأعمدة فسيكون عرضها متناسبًا مع محتوى الخلايا التي تتبع لها:<syntaxhighlight lang="html">
<div class="container">
  <table>
    <caption><small> عرض الجدول هو 814px، وعرض الأعمدة <strong>ليس</strong> مُحدَّدًا.</small></caption>
    <tr>
      <td>محتويات أوّل خلية في أوّل عمود</td>
      <td>محتوى ثاني خلية</td>
    </tr>
    <tr>
      <td>محتوى ثالث خلية</td>
      <td>رابع خلية</td>
    </tr>
  </table>
</div>
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">
.container {
  margin: 40px auto;
  width: 800px;
}

table,
td,
th {
  padding: 1em;
  border: 1px solid #ddd;
  text-align: left;
}

table {
  background-color: white;
  table-layout: auto;
  width: 814px;
}

caption {
  caption-side: bottom;
  font-style: italic;
}
</syntaxhighlight>أما إذا حددت عرض الأعمدة لكن لم تُحدِّد عرض الجدول، فسيكون عرض الجدول مساويًا لمجموع عرض الأعمدة المكونة له:<syntaxhighlight lang="html">
<div class="container">
  <table>
    <caption><small>عرض الجدول غير محدد، وعرض الأعمدة محدد.</small></caption>
    <tr>
      <td class="col-1">عرض هذا العمود مضبوطٌ إلى 300px.</td>
      <td class="col-2">عرض هذا العمود مضبوطٌ إلى 200px.</td>
    </tr>
    <tr>
      <td>محتوى ثالث خلية</td>
      <td>رابع خلية</td>
    </tr>
  </table>
</div>
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">
.container {
  margin: 40px auto;
  width: 800px;
}

table,
td,
th {
  padding: 1em;
  border: 1px solid #ddd;
  text-align: left;
}

table {
  background-color: white;
  table-layout: auto;
}

caption {
  caption-side: bottom;
  font-style: italic;
}

.col-1 {
  width: 300px;
}

.col-2 {
  width: 200px;
}
</syntaxhighlight>إذا كان عرض الجدول وأعمدته مضبوطًا، وكان مجموع عرض الأعمدة أقل من عرض الجدول، فستوزَّع المسافة الباقية على الأعمدة بالتساوي:<syntaxhighlight lang="html">
<div class="container">
  <table>
    <caption><small>عرض الجدول هو 814px، وعرض الأعمدة محدد ومجموعها أقل من عرض الجدول.</small></caption>
    <tr>
      <td class="col-1">عرض هذا العمود مضبوطٌ إلى 300px.</td>
      <td class="col-2">عرض هذا العمود مضبوطٌ إلى 200px.</td>
    </tr>
    <tr>
      <td>محتوى ثالث خلية</td>
      <td>رابع خلية</td>
    </tr>
  </table>
</div>
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">
.container {
  margin: 40px auto;
  width: 800px;
}

table,
td,
th {
  padding: 1em;
  border: 1px solid #ddd;
  text-align: left;
}

table {
  background-color: white;
  table-layout: auto;
  width: 814px;
}

caption {
  caption-side: bottom;
  font-style: italic;
}

.col-1 {
  width: 300px;
}

.col-2 {
  width: 200px;
}
</syntaxhighlight>إذا كان عرض الأعمدة أكبر من عرض الجدول، فلن يتوسع الجدول:<syntaxhighlight lang="html">
<div class="container">
  <table>
    <caption><small>عرض الجدول هو 814px، وعرض الأعمدة محدد ومجموعها أكبر من عرض الجدول.</small></caption>
    <tr>
      <td class="col-1">عرض هذا العمود مضبوطٌ إلى 900px.</td>
      <td class="col-2">عرض هذا العمود مضبوطٌ إلى 200px.</td>
    </tr>
    <tr>
      <td>محتوى ثالث خلية</td>
      <td>رابع خلية</td>
    </tr>
  </table>
</div>
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">
.container {
  margin: 40px auto;
  width: 800px;
}

table,
td,
th {
  padding: 1em;
  border: 1px solid #ddd;
  text-align: left;
}

table {
  background-color: white;
  table-layout: auto;
  width: 814px;
}

caption {
  caption-side: bottom;
  font-style: italic;
}

.col-1 {
  width: 900px;
}

.col-2 {
  width: 200px;
}
</syntaxhighlight>
== دعم المتصفحات ==
{| class="wikitable"
!الميزة
!|Chrome
!Firefox
!Internet Explorer
!Opera
!Safari
|-
! الدعم الأساسي
|14.0
|1.0
|5.0
|7.0
|1.0
|}
== البنية العامة ==
الخاصية <code>table-layout</code> تقبل إحدى الكلمتين المحجوزتين التاليتين.
===  <code>auto</code> ===
افتراضيًا، تستخدم أغلبية المتصفحات خوارزمية تلقائية لعرض الجداول، إذ يُعدَّل عرض الجدول والخلايا لكي تتسع لمحتوياتها.
===  <code>fixed</code> ===
سيُحدَّد عرض الجدول وعرض الأعمدة حسب قيمة عرض العنصرين <code>[[HTML/table|<nowiki><table></nowiki>]]</code> و <code>[[HTML/col|<col>]]</code> أو حسب عرض أوّل سطر من الخلايا، ولن يكون للخلايا الموجودة في الأسطر التي تلي أوّل سطر أيّ أثر.

إذا استعملنا <code>fixed</code> فسيتمكن المتصفح من عرض كامل الجدول بعد تنزيل وتحليل بيانات أوّل سطر، وهذا يؤدي إلى تسريع زمن إظهار الجدول مقارنةً بالطريقة التلقائية، التي تحتاج إلى تنزيل كامل الجدول وتحليله أولًا قبل عرضه.

المشكلة مع هذه القيمة هي أنَّ محتوى الخلايا الموجودة في الأسطر التي تلي أوّل سطر قد لا تتسع في عرض العمود، لكن يمكن استخدام الخاصية <code>[[CSS/overflow|overflow]]</code> للتحكم بسلوكها، لاحظ أنَّ المحتوى لن يخرج عن الخلية إلا إذا كان عرض الجدول محددًا.
=== البنية الرسمية ===
<syntaxhighlight lang="css">
table-layout: auto | fixed;

</syntaxhighlight>
== انظر أيضًا ==
* صفحة الخاصية <code>[[CSS/caption-side|caption-side]]</code> التي تُحدِّد موضع لافتة الجدول المُعرَّفة عبر العنصر <code>[[HTML/caption|<nowiki><caption></nowiki>]]</code>.

== مصادر ومواصفات ==
* مواصفة ‎[http://www.w3.org/TR/CSS2/tables.html#width-layout CSS Level 2 (Revision 1)‎]. 
[[تصنيف:CSS|{{SUBPAGENAME}}]]
[[تصنيف:CSS Property|{{SUBPAGENAME}}]]
[[تصنيف:CSS Table|{{SUBPAGENAME}}]]