تعرف على كيفية استخدام الجداول لعرض المحتوى في موقع الويب الخاص بك. وكذلك، تعلم كيفية تقسيم خلايا الجدول ودمجها واستيراد جداول البيانات وتصديرها.

تعتبر الجداول أداة قوية لتقديم البيانات الجدولية ولتخطيط النص والرسوم على صفحة HTML. يتحكم الجدول بصف واحد أو أكثر، ويتكون كل صف من خلية أو أكثر. بالرغم من أن الأعمدة تكون عادةً غير محددة صراحةً في تعليمة HTML البرمجية، يتيح Dreamweaver لك إمكانية معالجة الأعمدة بالإضافة إلى الصفوف والخلايا.

يعرض Dreamweaver عرض الجدول وعرض العمود لكل عمود جدول عند تحديد الجدول أو عند وجود نقطة الإدراج في الجدول. توجد أسهم بجوار العروض لقائمة رأس الجدول وقوائم رأس العمود. استخدم القوائم للوصول السريع إلى الأوامر المتعلقة بالجداول الشائعة. يمكنك تمكين أو تعطيل العروض والقوائم.

إذا لم تر عرضًا للجدول أو للعمود، فإن الجدول أو العمود لا يحتوي على عرض محدد في تعليمة HTML البرمجية. في حالة ظهور رقمين، فإن العرض المرئي كما يظهر في طريقة العرض Design لا يطابق العرض المحدد في تعليمة HTML البرمجية. يمكن أن يحدث هذا عندما تقوم بتغيير حجم الجدول عن طريق سحب زاويته السفلية اليمنى، أو عندما تضيف محتوى إلى خلية يكون أكبر من عرضها.

على سبيل المثال، إذا قمت بإعداد عرض العمود على 200 بكسل، ثم أضفت محتوى يمد العرض إلى 250 بكسل، يظهر رقمان لهذا العمود: 200 (العرض المحدد في الكود البرمجي) و(250) بين أقواس (العرض المرئي للعمود كما يخرج على شاشتك).

ملاحظة:

يمكنك أيضًا تخطيط صفحاتك باستخدام موضع CSS.

أسبقية تخطيط الجدول في HTML

عند تنسيق الجداول في طريقة العرض Design، يمكنك تعيين الخصائص للجدول بأكمله أو لصفوف أو أعمدة أو خلايا محددة في الجدول. عند تعيين خاصية، مثل لون الخلفية أو محاذاتها، على قيمة واحدة للجدول بأكمله وقيمة أخرى للخلايا الفردية، يكون لتنسيق الخلية الأسبقية فوق تنسيق الصف، والذي يأخذ بدوره أسبقية فوق تنسيق الجدول.

ويعد ترتيب الأسبقية لتنسيق الجدول كما يلي:

  1. Cells
  2. Rows
  3. Table

على سبيل المثال عند تعيين لون الخلفية لخلية مفردة كأزرق، ثم تعيين لون خلفية للجدول بأكمله كأصفر، لا تتغير الخلية الزرقاء إلى اللون الأصفر، حيث يكون لتنسيق الخلية الأسبقية فوق تنسيق الجدول.

ملاحظة:

عند تعيين خصائص على عمود، يقوم Dreamweaver بتغيير سمات العلامة td المطابقة لكل خلية في العمود.

حول تقسيم خلايا الجدول ودمجها

يمكنك دمج أي عدد من الخلايا المتجاورة - طالما كان التحديد بأكمله سطرًا أو مستطيلاً من الخلايا - لإنتاج خلية واحدة تمتد عبر عدة أعمدة أو صفوف. يمكنك تقسيم أي خلية إلى أي عدد من الصفوف أو الأعمدة، بغض النظر عما إذا كان تم دمجها مسبقًا أم لا. يقوم Dreamweaver بإعادة هيكلة الجدول تلقائيًا (بإضافة أي سمات ضرورية من colspan أو rowspan) لإنشاء الترتيبات المحددة.

في المثال التالي، تم دمج الخلايا الموجودة في منتصف الصفين الأولين إلى خلية واحدة تمتد عبر صفين.

الخلايا المدمجة
الخلايا المدمجة

إدراج جدول وإضافة محتوى

استخدم اللوحة Insert أو القائمة Insert لإنشاء جدول جديد. ثم، أضف نصًا وصور إلى خلايا الجدول بنفس الطريقة التي تضيف بها نصًا وصور خارج الجدول.

  1. ضع نقطة الإدراج حيثما تريد ظهور الجدول.

    ملاحظة:

    إذا كان مستندك فارغًا، يمكنك وضع نقطة الإدراج في بداية المستند فقط.

    • حدد Insert > Table.

    • في الفئة HTML من اللوحة Insert، انقر فوق Table.

  2. قم بتعيين سمات مربع الحوار Table وانقر فوق OK لإنشاء الجدول.
    إنشاء جدول
    إنشاء جدول

    Rows

    تحدد عدد صفوف الجدول.

    Columns

    تحدد عدد أعمدة الجدول.

    Table Width

    يحدد عرض الجدول بالبكسل أو كنسبة مئوية من عرض نافذة المستعرض.

    Border Thickness

    يحدد عرض حدود الجدول بالبكسل.

    Cell Spacing

    يحدد عدد وحدات البكسل بين خلايا الجدول المتجاورة.

    ملاحظة:

    إذا لم تعين صراحةً قيم لسمك الحد أو تباعد الخلايا ونطاق الخلايا، تعرض معظم المستعرضات سمك الحدود ونطاق الخلايا معينًا على 1 وتباعد الخلايا على 2. للتأكد من أن مستعرضاتك تعرض الجدول بدون حدود أو نطاق أو تباعد، قم بإعداد نطاق الخلية وتباعد الخلايا على صفر.

    Cell Padding

    يحدد عدد وحدات البكسل بين حد الخلية ومحتواها.

    None

    لا يقوم بتمكين عناوين الأعمدة أو الصفوف للجدول.

    Left

    يجعل العمود الأول من الجدول عمودًا للعناوين، بحيث يمكنك إدخال عنوان لكل صف من صفوف الجدول.

    Top

    يجعل الصف الأول من الجدول صفًا للعناوين، بحيث يمكنك إدخال عنوان لكل عمود من أعمدة الجدول.

    Both

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

    ملاحظة:

    يعد استخدم رؤوس فكرة جيدة في حالة قيام أي زائر لصفحة الويب الخاصة بك باستخدام قارئات الشاشة. تقرأ قارئات الشاشة عناوين الجدول وتساعد مستخدمي قارئات الشاشة على تتبع معلومات الجدول.

    Caption

    يوفر عنوان جدول يتم عرضه خارج الجدول.

    Summary

    يقد وصفًا للقالب. تقرأ قارئات الشاشة النص الملخص، لكن لا يظهر النص في مستعرض المستخدم.

استيراد الجداول وتصديرها

يمكنك استيراد بيانات جدولية تم إنشاؤها في تطبيق آخر (مثل Microsoft Excel) وتم حفظها بتنسيق نص محدد (مع فصل العناصر بعلامات جدولة أو فاصلات أو علامة نقطتين أو فاصلة منقوطة) إلى Dreamweaver وتنسيقها كجدول.

كما يمكنك أيضًا تصدير بيانات الجدول من Dreamweaver إلى ملف نصي، بمحتويات الخلايا المتجاورة مفصولة بمحدد. ويمكنك استخدام الفواصل وعلامات النقطتين والفواصل المنقوطة والمسافات كمحددات. عندما تقوم بتصدير جدول، يتم تصدير الجدول بأكمله، لا يمكنك تحديد أجزاء من الجدول لتصديرها.

ملاحظة:

إذا كنت تريد فقط بعض البيانات من جدول - على سبيل المثال، أول ستة صفوف أو أول ستة أعمدة، انسخ الخلايا التي تحتوي على البيانات، والصقها خارج الجدول (لإنشاء جدول جديد)، وقم بتصدير الجدول الجديد.

استيراد بيانات جدول

  1. حدد File > Import > Import Tabular Data.

  2. حدد خيارات البيانات الجدولية، ثم انقر فوق OK.

    Data File

    اسم الملف الذي تريد استيراده. انقر فوق الزر Browse لتحديد ملف.

    Delimiter

    المحدد الذي تستخدمه في الملف الذي تستورده.

    إذا قمت بتحديد Other، يظهر مربع حوار على يمين القائمة المنبثقة. ادخل المحدد المستخدم في ملفك.

    ملاحظة:

    حدد المحدد الذي تم استخدامه عند حفظ ملف البيانات. إذا لم تفعل ذلك، لن يتم استيراد الملف بالصورة المناسبة، ولن يتم تنسيق البيانات بالصورة الصحيحة في جدول.

    Table Width

    عرض الجدول.

    • حدد Fit to Data لكي تجعل عرض كل عمود كافيًا لكي يلائم أطول سلسلة نصية في العمود.

    • حدد Set لتعيين عرض ثابت للجدول بالبكسل أو كنسبة مئوية من عرض نافذة المستعرض.

    Border

    يحدد عرض حدود الجدول بالبكسل.

    Cell Padding

    عدد وحدات البكسل بين محتوى الخلية وحدود الخلية.

    Cell Spacing

    عدد وحدات البكسل بين خلايا الجدول المتجاورة.

    ملاحظة:

    إذا لم تقم صراحةً بتعين قيم للحدود وتباعد الخلايا ونطاق الخلية، فستعرض معظم المستعرضات الجدول بحدود وبنطاق خلية معين على 1 وتباعد الخلايا معين على 2. للتأكد من أن مستعرضاتك تعرض الجدول بدون نطاق أو تباعد، قم بإعداد نطاق الخلية وتباعد الخلايا على صفر. لعرض حدود الخلية والجدول عند إعداد الحدود على صفر، حدد View > Visual Aids > Table Borders.

    Format Top Row

    يحدد نوع التنسيق، إن وجد، الذي يتم تطبيقه على الصف العلوي من الجدول. حدد أحد خيارات التنسيق الأربعة: بدون تنسيق أو غامق أو مائل أو غامق مائل.

تصدير جدول

  1. ضع نقطة الإدراج في أي خلية من الجدول.
  2. حدد File > Export > Table.
  3. حدد الخيارات التالية:

    Delimiter

    يحدد حرف المحدد الذي ينبغي استخدامه لفصل العناصر في الملف المصدَّر.

    Line Breaks

    يحدد نظام التشغيل الذي ستفتح الملف المصدَّر فيه: Windows أو Macintosh أو UNIX. (لنظم التشغيل المختلفة طرق مختلفة لتحديد نهاية سطر من النص).

  4. انقر فوق Export.
  5. أدخل اسمًا للملف وانقر فوق Save.

تحديد عناصر الجدول

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

عندما تحرك مؤشرك فوق جدول أو صف أو عمود أو خلية، يقوم Dreamweaver بتمييز كل الخلايا في هذا التحديد بحيث تعرف الخلايا التي حددتها. ويكون هذا مفيدًا حينما يكون لديك جداول بدون حدود، أو خلايا تمتد على عدة أعمدة أو صفوف أو جداول متداخلة. ويمكنك تغيير لون التمييز في التفضيلات.

ملاحظة:

إذا وضعت المؤشر فوق حد الجدول، ثم ضغطت على المفتاح Control (في نظام التشغيل Windows) أو المفتاح Command (في نظام التشغيل Macintosh)، يتم تمييز بنية الجدول بأكملها - أي كل الخلايا في الجدول. ويكون هذا مفيدًا حينما يكون لديك جداول متداخلة وتريد أن ترى بنية أحد هذه الجداول.

حدد جدولاً بأكمله

قم بأحد الإجراءات التالية وحدد جدولاً:

  • انقر فوق الركن العلوي الأيسر من الجدول لتحريره.
  • انقر في خلية جدول، ثم حدد العلامة في محدد العلامات الموجود بالزاوية السفلية اليسرى من النافذة Document.
  • انقر داخل خلية جدول وانقر فوق قائمة رأس الجدول، ثم حدد Select Table. تظهر مقابض التحديد على الحواف السفلية واليمنى للجدول المحدد.
  • انقر داخل خلية جدول، ثم حدد Edit > Table > Select Table.

حدد صفًا أو عمودًا واحدًا أو أكثر.

  1. ضع المؤشر بحيث يشير إلى الحافة اليسرى من صف أو الحافة العلوية من عمود.
  2. عندما يتغير المؤشر إلى سهم تحديد، انقر لتحديد صف أو عمود، أو اسحب لتحديد عدة صفوف أو أعمدة.
    تحديد صف
    تحديد صف

تحديد عمود فردي

  1. انقر داخل العمود.
  2. انقر فوق قائمة رأس العامود واختر Select Column.

حدد خلية مفردة

  1. قم بأحد الإجراءات التالية:

    • انقر في الخلية، ثم حدد علامة <td> في محدد العلامات الموجود بالزاوية السفلية اليسرى من النافذة Document.
    • انقر مع الضغط على المفتاح Control (في نظام التشغيل Windows) أو انقر مع الضغط على المفتاح Command (في نظام التشغيل Macintosh) في الخلية.

حدد سطرًا أو كتلة مستطيلة من الخلايا

قم بأحد الإجراءات التالية:
  • اسحب من خلية إلى خلية أخرى.

  • انقر في خلية واحدة، ثم انقر مع الضغط على المفتاح Control (في نظام التشغيل Windows) أو انقر مع الضغط على المفتاح Command (في نظام التشغيل Macintosh) في نفس الخلية لتحديدها، ثم انقر مع الضغط على المفتاح Shift في خلية أخرى.

تحديد مجموعة خلايا
تحديد مجموعة خلايا

حدد خلايا غير متجاورة

انقر مع الضغط على المفتاح Control (في نظام التشغيل Windows) أو انقر مع الضغط على المفتاح Command (في نظام التشغيل Macintosh) في الخلايا أو الصفوف أو الأعمدة التي تريد تحديدها.

إذا تم بالفعل تحديد كل خلية أو صف أو عمود نقرته مع الضغط على المفتاح Control أو مع الضغط على المفتاح Command، فسيتم إضافته إلى التحديد. تم تحديده بالفعل، وتمت إزالته من التحديد.

تغيير لون التمييز لعناصر الجدول

  1. حدد Edit > Preferences ‏(في نظام التشغيل Windows) أو Dreamweaver > Preferences ‏(في نظام التشغيل Macintosh).
  2. حدد Highlighting من القائمة Category الموجودة إلى اليسار، قم بإجراء أحد التغييرات التالية، ثم انقر فوق OK.
    • لتغيير لون التمييز لعناصر الجدول، انقر فوق مربع اللون Mouse-Over، ثم حدد لون تمييز باستخدام منتقي الألوان (أو أدخل قيمة سداسية عشر للون التمييز في مربع النص).

    • لتمكين أو تعطيل تمييز عناصر الجدول، قم بتحديد أو إلغاء تحديد الخيار Show أو لـ Mouse-Over.

    ملاحظة:

    تؤثر هذه الخيارات على جميع الكائنات، مثل الجداول، التي يقوم Dreamweaver بتمييزها عند تحريك المؤشر فوقها.  

تعيين خصائص الجدول

يمكنك استخدام عارض الخصائص لتحرير الجداول.

  1. حدد جدولاً.
  2. في عارض الخصائص ‏(Window >Properties)، قم بتغيير الخصائص حسب الضرورة.
    خصائص الجدول
    خصائص الجدول

    معرف الجدول

    معرف للجدول.

    صفوف وأعمدة

    عدد الصفوف والأعمدة في الجدول.

    W

    عرض الجدول بالبكسل أو كنسبة مئوية من عرض نافذة المستعرض.

    ملاحظة:

    لست في حاجة عادةً لتعيين ارتفاع جدول.

    CellPad

    عدد وحدات البكسل بين محتوى الخلية وحدود الخلية.

    CellSpace

    عدد وحدات البكسل بين خلايا الجدول المتجاورة.

    Align

    يحدد مكان ظهور الجدول، فيما يتعلق بالعناصر الأخرى في نفس الفقرة، مثل النص أو الصور.

    يؤدي الخيار Left إلى محاذاة الجدول إلى يسار العناصر الأخرى (بحيث يلف النص في نفس الفقرة حول الجدول إلى اليمين)؛ بينما يؤدي الخيار Right إلى محاذاة الجدول إلى يمين العناصر الأخرى (بحيث يلف النص حول الجدول إلى اليسار)؛ بينما يؤدي الخيار Center إلى توسيط الجدول (بحيث يظهر النص فوق و/أو تحت الجدول). بينما يشير الخيار Default إلى أنه يجب على المستعرض استخدام محاذاته الافتراضية.

    ملاحظة:

    عند تعيين المحاذاة إلى الوضع الافتراضي، لا يتم عرض المحتويات الأخرى بجوار الجدول. لعرض جدول بجوار محتوى آخر، استخدم المحاذاة لليمين أو لليسار.

    Border

    يحدد عرض حدود الجدول بالبكسل.

    ملاحظة:

    إذا لم تقم صراحةً تعين قيم للحدود وتباعد الخلايا ونطاق الخلية، فستعرض معظم المستعرضات الجدول بحدود وبنطاق خلية معين على 1 وتباعد الخلايا معين على 2. للتأكد من أن مستعرضاتك تعرض الجدول بدون نطاق أو تباعد، قم بإعداد الجدول على صفر، ونطاق الخلية وتباعد الخلايا على صفر. لعرض حدود الخلية والجدول عند إعداد الحدود على صفر، حدد View > Visual Aids > Table Borders.

    Class

    يعين فئة CSS على الجدول.

    ملاحظة:

    قد تحتاج إلى توسيع عارض الخصائص بالجدول لعرض الخيارات التالية. لتوسيع عارض الخصائص بالجدول، انقر فوق السهم الموسع في الركن السفلي الأيمن.

    Clear Column Widths وClear Row Heights

    يعمل الخيار Clear Row Heights على حذف كل قيم ارتفاع الصفوف أو عرض العمود المحددة صراحةً من الجدول.

    Convert Table Widths To Pixels

    يعمل الخيار Convert Table Heights To Pixels على إعداد عرض أو ارتفاع كل عمود في الجدول على عرضه الحالي بالبكسل (كما يقوم أيضًا بإعداد عرض الجدول بأكمله على عرضه الحالي بالبكسل).

    Convert Table Widths To Percent

    يعمل الخيار Convert Table Heights To Percent على إعداد عرض أو ارتفاع كل عمود في الجدول على عرضه الحالي معبر عنه بالنسبة المئوية من عرض النافذة Window (كما يقوم أيضًا بإعداد عرض الجدول بأكمله على عرضه الحالي كنسبة مئوية من عرض النافذة Document).

    في حالة إدخال قيمة في مربع نص، اضغط على المفتاح Tab أو Enter (في نظام التشغيل Windows) أو Return (في نظام التشغيل Macintosh) لتطبيق القيمة.

تعيين خصائص خلية أو صف أو عمود

يمكنك استخدام عارض الخصائص لتحرير الخلايا أو الصفوف في جدول.

  1. حدد العمود أو الصف.
  2. في عارض الخصائص (Window > ‏Properties)‏، قم بتعيين الخيارات التالية:

    Horz

    يحدد المحاذاة الأفقية لمحتويات خلية أو صف أو عمود. يمكنك محاذاة المحتويات إلى يسار أو يمين أو وسط الخلايا، أو يمكنك تحديد أنه ينبغي على المستعرض استخدام المحاذاة الافتراضية (عادةً إلى اليسار للخلايا المستطيلة والوسط لخلايا الرأس).

    Vert

    يحدد المحاذاة الرأسية لمحتويات خلية أو صف أو عمود. يمكنك محاذاة المحتويات إلى أعلى أو وسط أو أسفل أو الخط الأساسي للخلايا، أو يمكنك تحديد أنه ينبغي على المستعرض استخدام المحاذاة الافتراضية (عادةً الوسط).

    W and H

    عرض أو ارتفاع الخلايا المحددة بالبكسل أو كنسبة مئوية من عرض أو ارتفاع الجدول بأكمله. لتحديد النسبة المئوية، اتبع القيمة برمز النسبة المئوية (%). لكي تترك المستعرض يحدد العرض أو الارتفاع الملائم بناءً على محتويات الخلية وعروض وارتفاعات الأعمدة أو الصفوف الأخرى، اترك الحقل فارغًا (الوضع الافتراضي).

    افتراضيًا، يختار المستعرض ارتفاع صف وعرض عمود لكي يستوعب أعرض صورة أو أطول سطر في عمود. ولهذا السبب يصبح العمود في بعض الأحيان أعرض من الأعمدة الأخرى في الجدول عندما تضيف محتويات إليه.

    ملاحظة:

    يمكنك تحديد ارتفاع كنسبة مئوية من إجمالي طول الجدول، لكن لا يمكن أن يعرض الصف بالنسبة المئوية للارتفاع المحددة في المستعرضات.

    Bg

    لون الخلفية لخلية أو عمود أو صف، مختار بمنتقي الألوان.

    Merge Cells

    دمج خلايا أو صفوف أو أعمدة محددة في خلية واحدة. يمكنك دمج خلايا فقط إذا كانت تكون مستطيلاً أو كتلة طولية.

    Split Cell

    يقسم خلية، بإنشاء خليتين أو أكثر. يمكنك أيضًا تقسيم خلية واحدة في المرة الواحدة؛ ويتم تعطيل هذا الزر في حالة تحديد أكثر من خلية واحدة.

    No Wrap

    يمنع لف السطر، ويترك كل النص الموجود في خلية محددة في سطر واحد. في حالة تعطيل No Wrap، يتم توسيع الخلايا لكي تستوعب كل البيانات التي تكتبها أو تلصقها في خلية. (في المعتاد، يتم توسيع الخلية بصورة عرضية لكي تستوعب أطول كلمة أو أعرض صورة في الخلية، ثم توسيعها طوليًا حسب الضرورة لكي تستوعب المحتويات الأخرى).

    Header

    ينسق الخلايا المحددة كخلايا رأس جدول. تكون محتويات خلايا رأس الجدول غامقة ويتم توسيطها بشكل افتراضي.

    ملاحظة:

    يمكنك تحديد العروض والارتفاعات إما بالبكسل أو بالنسبة المئوية، ويمكنك التحويل من البكسل إلى النسبة المئوية والعكس.

    ملاحظة:

    عند تعيين خصائص على عمود، يقوم Dreamweaver بتغيير سمات العلامة td المطابقة لكل خلية في العمود. إلا أنه عندما تقوم بتعيين خصائص معينة لصف، يقوم Dreamweaver بتغيير سمات علامة tr بدلاً من تغيير سمات كل علامة td في الصف. عندما تطبق نفس التنسيق إلى كل الخلايا في صف، يعمل تطبيق التنسيق على علامة tr على إنتاج تعليمة HTML برمجية أنظف وأكثر دقة.

  3. اضغط المفتاح Tab أو Enter (في نظام التشغيل Windows) أو المفتاح Return (في نظام التشغيل Macintosh) لتطبيق القيمة.

تنسيق الجداول والخلايا

يمكنك تغيير مظهر الجداول بتعيين الخصائص للجدول وخلاياه أو بتطبيق تصميم معد مسبقًا على الجدول. قبل أن تقوم بتعيين خصائص الجدول وخصائص الخلايا، تنبه إلى أن ترتيب أسبقية التنسيق هي الخلايا والصفوف والجداول.

ملاحظة:

لتنسيق النص داخل خلية جدول، استخدم نفس الإجراءات التي تريد استخدامها لتنسيق نص خارج جدول.

تغيير تنسيق جدول أو صف أو خلية أو عمود

  1. تحديد جدول أو خلية أو صف أو عمود.
  2. في عارض الخصائص (Window > Properties)، انقر فوق السهم الموسع في الركن السفلي الأيمن وغيّر الخصائص حسب الضرورة.
  3. قم بتغيير الخصائص وفقًا لما هو ضروري:

    لمزيد من المعلومات حول الخيارات، انقر فوق الرمز Help في عارض الخصائص.

    ملاحظة:

    عند تعيين خصائص على عمود، يقوم Dreamweaver بتغيير سمات العلامة td المطابقة لكل خلية في العمود. ومع ذلك، عندما تقوم بتعيين خصائص معينة لصف، يقوم Dreamweaver بتغيير سمات علامة tr بدلاً من تغيير سمات كل علامة td في الصف، وعندما تقوم بتطبيق نفس التنسيق على كل الخلايا في صف، يعمل تطبيق التنسيق على العلامة tr على إنتاج تعليمة HTML برمجية أنظف وأكثر دقة.

إضافة أو تحرير قيم إمكانية الوصول لجدول في طريقة العرض Code

قم بتحرير السمات المناسبة في الكود البرمجي.

ملاحظة:

لتحديد موقع العلامات بسرعة في الكود البرمجي، انقر في الجدول، ثم حدد علامة <table> في محدد العلامات الموجود أسفل النافذة Document.

إضافة أو تحرير قيم إمكانية الوصول لجدول في طريقة العرض Design

  • لتحرير تعليق الجدول، قم بتمييز التعليق واكتب تعليقًا جديدًا.
    • لتحرير محاذاة التعليق، ضع نقطة الإدراج في تعليق الجدول، انقر بزر الماوس الأيمن (في نظام التشغيل Windows) أو انقر مع الضغط على Control (في نظام التشغيل Macintosh)، ثم حدد Edit Tag Code.

    • لتحرير ملخص الجدول، حدد الجدول، ثم انقر بزر الماوس الأيمن (في نظام التشغيل Windows) أو انقر مع الضغط على Control (في نظام التشغيل Macintosh)، ثم حدد Edit Tag Code.

تغيير حجم الجداول والأعمدة والصفوف

تغيير حجم الجداول

يمكنك تغيير حجم جدول بأكمله أو صفوف أو أعمدة فردية. عندما تقوم بتغيير حجم جدول بأكمله، يتغير حجم كل الخلايا في الجدول بصورة تناسبية. إذا كانت خلايا الجدول تحتوي على عروض أو ارتفاعات صريحة محددة، يؤدي تغيير حجم الجدول إلى تغيير الحجم البصري للخلايا في النافذة Document، لكن لا يؤدي إلى تغيير العروض والارتفاعات المحددة للخلايا.

يمكنك تغيير حجم جدول بسحب مقبض أو أكثر من مقابض التحديد. يعرض Dreamweaver عرض الجدول، مع قوائم رؤوس الجداول، أعلى أو أسفل الجدول عند تحديد الجدول أو عند وجود نقطة الإدراج في الجدول.

وفي بعض الأحيان، تكون عروض الأعمدة المعينة لتعليمة HTML البرمجية غير مطابقة لعروضها الواضحة على الشاشة. عندما يحدث ذلك، يمكنك جعل العرض ثابتًا. تظهر عروض الجداول والأعمدة وقوائم الرؤوس في Dreamweaver لتساعدك على تخطيط جداول؛ ويمكنك تمكين أو تعطيل العروض والقوائم حسب الضرورة.

تغيير حجم الجداول والصفوف

يمكنك تغيير عرض عمود أو ارتفاع صف في عارض الخصائص أو بسحب حدود العمود أو الصف. إذا كانت لديك مشكلة في تغيير الحجم، يمكنك مسح عروض الأعمدة أو ارتفاعات الصفوف والبدء من جديد.

ملاحظة:

يمكنك تغيير عروض وارتفاعات الخلايا مباشرةً في تعليمة HTML البرمجية باستخدام طريقة العرض Code.

يعرض Dreamweaver عرض العمود، مع قوائم رؤوس الجداول، أعلى أو أسفل الأعمدة عند تحديد الجدول أو عند وجود نقطة الإدراج في الجدول؛ ويمكنك تمكين أو تعطيل قوائم رؤوس الأعمدة حسب الضرورة.

تغيير حجم جدول

حدد الجدول. إذا كنت في طريقة العرض Live، يظهر Element Display عند تحديد الجدول. انقر فوق أيقونة الشطيرة لإدخال وضع تنسيق الجدول.

  • لتغيير حجم الجدول بصورة أفقية، اسحب مقبض التحديد الموجود على اليمين.

  • لتغيير حجم الجدول بصورة رأسية، اسحب مقبض التحديد الموجود بالأسفل.

  • لتغيير حجم الجدول في كلا البعدين، اسحب مقبض التحديد الموجود في الزاوية السفلية اليمنى.

للخروج من وضع تنسيق الجدول في طريقة العرض Live، اضغط على Esc أو انقر خارج الجدول. يمكنك استخدام خيارات قائمة Edit > Table لتعديل الجدول بصورة أكبر.

ملاحظة:تختلف الخيارات في قائمة Edit > Table مدى قيامك بتحديد الجدول بأكمله أو خلية مفردة. في طريقة العرض Live، يقوم Element Display بإظهار 'table' عند تحديد جدول بالكامل و'td' عند تحديد خلية معينة. للتبديل من تنسيق خلية التنسيق لوضع تنسيق الجدول، انقر فوق حدود الجدول.

قم بتغيير عرض العمود وحافظ على عرض الجدول بأكمله

  1. في طريقة العرض Design، اسحب الحد الأيمن للعمود الذي ترغب في تغييره.

    يتغير عرض العمود المجاور أيضًا، بحيث يمكنك بالفعل تغيير حجم العمودين. يعرض لك التعليق المرئي كيف سيتم ضبط الأعمدة؛ لا يتغير عرض الجدول بأكمله.

    تغيير عرض العمود أثناء الاحتفاظ بعرض الجدول
    تغيير عرض العمود أثناء الاحتفاظ بعرض الجدول

    ملاحظة:

    في الجداول التي بها عروض قائمة على النسبة المئوية (وليس البكسل)، إذا سحبت الحد الأيمن لأقصى عمود في اليمين، يتغير عرض الجدول بأكمله، ويزداد عرض كل الأعمدة أو يزداد ضيقها بالتناسب.

قم بتغيير عرض العمود وحافظ على حجم أعمدة أخرى.

  1. في طريقة العرض Design، ‏‫اضغط مع الاستمرار على المفتاح Shift واسحب حد العمود.

    يتغير عرض عمود واحد. يعرض لك التعليق المرئي كيف سيتم ضبط الأعمدة؛ لا يتغير عرض الجدول بأكمله لكي يستوعب العمود الذي تغير حجمه.

    تغيير عرض العمود أثناء احتفاظ الأعمدة الأخرى بعرضها
    تغيير عرض العمود أثناء احتفاظ الأعمدة الأخرى بعرضها

تغيير ارتفاع الصف بشكل مرئي

اسحب الحد الأدنى من الصف.

جعل عرض العمود في الكود البرمجي متوافقًا مع العرض المرئي

  1. انقر داخل خلية.
  2. انقر فوق قائمة رأس الجدول، ثم حدد Make All Widths Consistent.

    يقوم Dreamweaver بإعادة تعيين العرض المحدد في الكود البرمجي لكي يطابق العرض المرئي.

مسح كل العروض والارتفاعات المحددة في جدول

  1. حدد الجدول.
  2. قم بأحد الإجراءات التالية:
    • حدد Edit > Table > Clear Cell Widths، أو Edit > Table > Clear Cell Heights.

    • في عارض الخصائص (Window > Properties)، انقر فوق الزر Clear Row Heights أو الزر Clear Column Widths .

    • انقر فوق قائمة عنوان الجدول، ثم حدد Clear All Heights أو Clear All Widths.

مسح العرض المحدد للعمود

انقر داخل العمود، وانقر فوق قائمة رأس العامود، ثم حدد Clear Column Width.

تمكين أو تعطيل عروض الأعمدة والقوائم في Design View

حدد View > Design View Options > Visual Aids > Table Widths.

إضافة صفوف وأعمدة وإزالتها

لإضافة صفوف وأعمدة وإزالتها، استخدم Modify > Table أو قائمة رأس العمود.

ملاحظة:

عند الضغط على المفتاح Tab في الخلية الأخيرة من الجدول يضيف تلقائيًا صفًا آخر للجدول.

إضافة صف أو عمود مفرد

انقر داخل خلية، وقم بتنفيذ أحد الخيارات التالية:
  • حدد Edit > Table > Insert Row أو Edit > Table > Insert Column.

    يظهر صف جديد فوق نقطة الإدراج أو يظهر عمود إلى يسار نقطة الإدراج.

  • انقر فوق قائمة رأس العمود، ثم حدد Insert Column Left أو Insert Column Right.

     

إضافة صفوف أو أعمدة متعددة

  1. انقر داخل خلية.
  2. حدد Edit > Table > Insert Rows أو Columns، ثم أكمل مربع الحوار، ثم انقر فوق OK.

    Insert

    يحدد ما إذا كان يتم إدراج صفوف أو أعمدة.

    Number of Rows أو Number of Columns

    عدد الصفوف أو الأعمدة المطلوب إدراجها.

    Where

    يحدد ما إذا كان ينبغي ظهور الصفوف أو الأعمدة الجديدة قبل أو بعد صف أو عمود الخلية المحدد.

حذف صف أو عمود

قم بأحد الإجراءات التالية:
  • انقر داخل خلية داخل الصف أو العمود الذي تريد حذفه، ثم حدد Edit > Table > Delete Row، أو Edit > Table > Delete Column.

  • حدد صفًا أو عمودًا كاملاً، ثم اضغط Delete.

  • افتح عارض الخصائص (Windows > Properties)، وقم بأحد الإجراءات التالية:
    • لإضافة أو إزالة صفوف، قم بزيادة أو تقليل قيمة الصفوف.
    • لإضافة أعمدة أو إزالتها، قم بزيادة أو تقليل قيمة الأعمدة.

ملاحظة:

لا يحذرك Dreamweaver إذا كنت تحذف صفوف أو أعمدة تحتوي على بيانات.

تقسيم ودمج الخلايا

استخدم عارض الخصائص أو الأوامر في القائمة الفرعية Edit > Table لتقسيم أو دمج الخلايا.

دمج خليتين أو أكثر في جدول

  1. حدد الخلايا في صف متصل أو في شكل مستطيل.

    في الشكل أدناه، يكون التحديد عبارة عن مستطيل من الخلايا، ومن ثم يمكن دمج الخلايا.

    يمكن دمج الخلايا في مستطيل خلايا
    يمكن دمج الخلايا في مستطيل خلايا

    في الشكل أدناه، لا يكون التحديد على شكل مستطيل من الخلايا، ومن ثم لا يمكن دمج الخلايا.

    لا يمكن دمج الخلايا إذا كان التحديد ليس مستطيلاً
    لا يمكن دمج الخلايا إذا كان التحديد ليس مستطيلاً

  2. قم بأحد الإجراءات التالية:
    • حدد Edit > Table > Merge Cells.

    • في عارض خصائص HTML الموسّع (Window > Properties)، انقر فوق Merge Cells.

    ملاحظة:

    إذا لم ترَ الزر، فانقر فوق السهم الموسع في الركن السفلي الأيمن من عارض الخصائص بحيث ترى كل الخيارات..

    يتم وضع محتويات الخلايا المفردة في الخلية المدمجة الناتجة. يتم تطبيق خصائص الخلية الأولى المحددة على الخلية المدمجة.

تقسيم خلية

  1. انقر داخل الخلية، وقم بتنفيذ أحد الخيارات التالية:
    • حدد Edit > Table > Split Cell.

    • في عارض خصائص HTML الموسّع (Window > Properties)، انقر فوق Split Cell.

    ملاحظة:

    إذا لم ترَ الزر، انقر فوق السهم الموسع في الركن السفلي الأيمن من عارض الخصائص بحيث ترى كل الخيارات.

  2. في مربع الحوار Split Cell، حدد كيفية تقسيم الخلية:

    Split Cell Into

    يحدد ما إذا كان سيتم تقسيم الخلية إلى صفوف أو أعمدة.

    Number Of Rows/Number Of Columns

    يحدد عدد الصفوف أو الأعمدة التي سيتم تقسيم الخلية عليها.

إضافة أو إزالة عدد الصفوف أو الأعمدة الممتدة على خلية.

قم بأحد الإجراءات التالية:
  • حدد Edit > Table > Increase Row Span، أو Edit > Table > Increase Column Span.

  • حدد Edit > Table > Decrease Row Span أو Edit > Table > Decrease Column Span.

نسخ الخلايا ولصقها وحذفها

يمكنك النسخ أو اللصق أو الحذف لخلية جدول مفردة أو خلايا متعددة مرة واحدة، حفظ تنسيق الخلايا.

يمكنك لصق الخلايا في نقطة الإدراج أو في مكان تحديد في جدول موجود. للصق خلايا جدول متعددة، يجب أن تكون محتويات الحافظة متوافقة مع بنية الجدول أو التحديد في الجدول الذي سيتم لصق الخلايا فيه.

قص أو نسخ خلايا جدول

  1. حدد خلية واحدة أو أكثر في صف متصل أو في شكل مستطيل.

    في الشكل أدناه، يكون التحديد عبارة عن مستطيل من الخلايا، ومن ثم يمكن قص أو نسخ الخلايا.

    يمكن قص الخلايا أو نسخها في مستطيل خلايا
    يمكن قص الخلايا أو نسخها في مستطيل خلايا

    في الشكل أدناه، لا يكون التحديد مستطيلاً من الخلايا، ومن ثم لا يمكن قص الخلايا أو نسخها.

    لا يمكن قص الخلايا أو نسخها إذا كان التحديد ليس مستطيلاً
    لا يمكن قص الخلايا أو نسخها إذا كان التحديد ليس مستطيلاً

  2. حدد Edit > Cut or Edit > Copy.

    ملاحظة:

    إذا حددت صفًا أو عمودًا بأكمله، وحددت Edit > Cut، يتم حذف الصف أو العمود بأكمله من الجدول (وليس محتويات الخلايا فقط).

لصق خلايا الجدول

  1. حدد المكان الذي تريد لصق الخلايا فيه:
    • لاستبدال خلايا موجود بالخلايا التي تلصقها، حدد مجموعة من الخلايا الموجودة بنفس التخطيط مثل الخلايا الموجودة على الحافظة. (على سبيل المثال، إذا نسخت أو قصصت كتلة من الخلايا 3 x 2، يمكنك تحديد كتلة أخرى 3 x 2 من الخلايا لاستبدالها باللصق).

    • للصق صف بأكمله من الخلايا فوق خلية معينة، انقر في هذه الخلية.

    • للصق عمود بأكمله من الخلايا إلى يسار خلية معينة، انقر في هذه الخلية.

    ملاحظة:

    إذا كان لديك أقل من صف أو عمود كامل من الخلايا في الحافظة، ونقرت في إحدى الخلايا ولصقت الخلايا من الحافظة، فقد يتم استبدال الخلية التي نقرت داخلها والخلايا المجاورة (تبعًا لموقعها في الجدول) بالخلايا التي تلصقها.

    • لإنشاء جدول جديد بخلايا ملصوقة، ضع نقطة الإدراج خارج الجدول.
  2. حدد Edit > ‏Paste.

    إذا كنت تلصق صفوف أو أعمدة بأكملها إلى جدول موجود، يتم إضافة الصفوف أو الأعمدة إلى الجدول. إذا كنت تلصق خلية فردية، يتم استبدال محتويات الخلية المحددة. إذا كنت تلصق خارج جدول، يتم استخدام الصفوف أو الأعمدة أو الخلايا لتحديد جدول جديد.

أزل محتويات الخلية لكن اترك الخلايا بدون تغيير

  1. حدد خلية واحدة أو أكثر.

    ملاحظة:

    تأكد من أن التحديد لا يتوافق بالكامل مع الصفوف أو الأعمدة الكاملة.

  2. اضغط Delete.

    ملاحظة:

    إذا تم تحديد صفوف أو أعمدة كاملة فقط عندما تحدد Edit > Clear أو تضغط Delete، يتم إزالة الصفوف أو الأعمدة بأكملها - وليس فقط محتوياتها - من الجدول.

حذف الصفوف أو الأعمدة التي تحتوي على خلاي مدمجة

  1. حدد الصف أو العمود.
  2. حدد Edit > Table > Delete Row، أو Edit > Table > Delete Column.

الجداول المتداخلة

الجدول المتداخل هو جدول داخل خلية جدول آخر. يمكنك تنسيق جدول متداخل كما تفعل مع أي جدول آخر، ومع ذلك، فإن عرضه محدد بعرض الخلية التي يظهر فيها.

  1. انقر داخل إحدى خلايا الجدول الموجود.
  2. حدد Insert > Table، ثم قم بتعيين خيارات Insert Table، وانقر فوق OK.

فرز الجداول

يمكنك فرز صفوف جدول بناءً على محتويات عمود مفرد. يمكنك أيضًا تنفيذ فرز للجدول أكثر تعقيدًا بناءً على محتويات العمودين.

لا يمكنك فرز الجداول التي تحتوي على سمات colspan أو rowspan التي هي عبارة عن جداول تحتوي على خلايا مدمجة.

  1. حدد الجدول أو انقر داخل أي خلية.
  2. حدد Edit > Table > Sort Table، ثم قم بتعيين الخيارات في مربع الحوار، وانقر فوق OK.

    Sort By

    يحدد قيم العمود التي سيتم استخدامها لفرز صفوف الجدول.

    Order

    يحدد ما إذا كان سيتم فرز العمود أبجديًا أو رقميًا، وما إذا كان سيتم فرز العمود بترتيب تصاعدي ("أ" إلى "ي"، أو الأرقام الأدنى إلى الأرقام الأعلى) أو بترتيب تنازلي.

    عندما تكون محتويات عمود عبارة عن أرقام، حدد Numerically. يتم تطبيق فرز أبجدي على قائمة من أعداد مكونة من رقم واحد أو رقمين وينتج عنه فرز الأرقام كما لو كانت كلمات (ينتج عنها ترتيب مثل 1، 10، 2، 20، 3، 30) بدلاً من الفرز كأرقام (ينتج عنه ترتيب مثل 1، 2، 3، 10، 20، 30).

    Then By/Order

    يحدد ترتيب الفرز لترتيب ثانوي في عمود مختلف. حدد عمود الفرز الثانوي في القائمة By pop‑up، وترتيب الفرز الثانوي في القوائم المنبثقة Order.

    Sort Includes The First Row

    يحدد أنه ينبغي تضمين الصف الأول من الجدول في الفرز. إذا كان الصف الأول هو عنوان لا ينبغي نقله، لا تحدد هذا الخيار.

    Sort Header Rows

    يحدد فرز كل الصفوف في قسم thead بالجدول (إن وجد) باستخدام نفس المعايير مثل صفوف النص الأساسي. (لاحظ أن صفوف thead تظل في قسم thead وتظل تظهر أعلى الجدول حتى بعد الفرز). للحصول على معلومات عن علامة thead، راجع اللوحة Reference (حدد Help > Reference).

    Sort Footer Rows

    يحدد فرز كل الصفوف في قسم tfoot بالجدول (إن وجد) باستخدام نفس المعايير مثل صفوف النص الأساسي. (لاحظ أن صفوف tfoot تظل في قسم tfoot وتظل تظهر أعلى الجدول حتى بعد الفرز). للحصول على معلومات حول علامة tfoot راجع اللوحة Reference (حدد Help > Reference).

    Keep All Row Colors The Same After The Sort Has Been Completed

    يحدد أن سمات صف الجدول (مثل اللون) ينبغي أن تظل بنفس المحتويات بعد الفرز. إذا تم تنسيق صفوف جدولك بلونين متبادلين، لا تحدد هذا الخيار لضمان أن يظل الجدول المفروز يحتوي على صفوف بألوان متبادلة. إذا كانت سمات الصف محددة لمحتوى كل صف، فحدد هذا الخيار لضمان أن تظل هذه السمات مرتبطة بالصفوف الصحيحة في الجدول المفروز.

تم ترخيص هذا العمل بموجب الترخيص العام غير المعدل الخاص بالإسناد وعدم التجارة والمشاركة الإصدار 3.0 ‏من ‏‏Creative Commons‏‏  إن بنود Creative Commons لا تشمل منشورات Twitter™‎ وFacebook.

إشعارات قانونية   |   سياسة الخصوصية على الإنترنت