أحدث البرامج التعليمية وتطوير الشبكة
 

HTML <table> Tag

❮ السابق التالي ❯

مثال

جدول HTML بسيطة، تحتوي على عمودين وصفين:

<table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>
انها محاولة لنفسك »

أكثر "انها محاولة لنفسك" الأمثلة أدناه.

تعريف واستخدام

و <table> تعرف العلامة جدول HTML.

يتكون جدول HTML من <table> عنصر واحد أو أكثر <tr> ، <th> ، و <td> العناصر.

و <tr> يعرف عنصر صف جدول، و <th> عنصر يحدد رأس الطاولة، و <td> عنصر يحدد خلية الجدول.

ويمكن أن تشمل جدول HTML أكثر تعقيدا أيضا <caption>, <col>, <colgroup>, <thead>, <tfoot> ، و <tbody> العناصر.

دعم المتصفح

العنصر
<table> نعم فعلا نعم فعلا نعم فعلا نعم فعلا نعم فعلا

الخلافات بين HTML 4.01 و HTML5

و "align", "bgcolor", "cellpadding", "cellspacing", "frame", "rules", "summary" ، و "width" سمات غير معتمدة في HTML5.

الصفات

السمة القيمة وصف
align left
center
right		 غير معتمدة في HTML5.
تحدد محاذاة الجدول وفقا للنص المحيطة
bgcolor rgb(x,x,x)
#xxxxxx
colorname		 غير معتمدة في HTML5.
يحدد لون الخلفية لجدول
border 1
0		 تحدد ما إذا كان يتم استخدام الجدول لأغراض تخطيط
cellpadding pixels غير معتمدة في HTML5.
يحدد المسافة بين جدار الخلية ومحتوى خلية
cellspacing pixels غير معتمدة في HTML5.
يحدد المسافة بين الخلايا
frame void
above
below
hsides
lhs
rhs
vsides
box
border		 غير معتمدة في HTML5.
يحدد أي أجزاء من الحدود الخارجية التي يجب أن تكون واضحة
rules none
groups
rows
cols
all		 غير معتمدة في HTML5.
يحدد أي أجزاء من الحدود داخل ينبغي أن تكون واضحة
sortablesortable يحدد هذا الجدول يجب أن يكون للفرز
summary text غير معتمدة في HTML5.
يحدد ملخصا لمحتوى الجدول
width pixels
%		 غير معتمدة في HTML5.
يحدد عرض جدول

السمات العامة

و <table> كما يدعم بطاقة و السمات العامة في HTML .

سمات الحدث

و <table> كما يدعم هذا الكود في حدث سمات في HTML .

انها محاولة لنفسك - أمثلة

رؤوس الجدول
كيفية إنشاء رؤوس الجدول.

الجدول مع تعليق
جدول HTML مع التعليق.

الكلمات داخل الجدول
كيفية عرض العناصر داخل العناصر الأخرى.

الخلايا التي تمتد أكثر من صف واحد / العمود
كيفية تعريف خلايا الجدول التي تمتد أكثر من صف واحد أو عمود واحد.

صفحات ذات صلة

HTML البرنامج التعليمي: جداول HTML

HTML DOM مرجع: Table كائن

CSS دروس: Styling الجداول

الإعدادات الافتراضية CSS

معظم المتصفحات عرض <table> العنصر مع القيم الافتراضية التالية:

مثال

table {
    display: table;
    border-collapse: separate;
    border-spacing: 2px;
    border-color: gray;
}
انها محاولة لنفسك »


❮ السابق التالي ❯