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

ينشئ سلسلة والعلامة :

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

رأس الجدول

الخلية الأولى الصف الأول	الخلية الثانية الصف الأول
الخلية الأولى من الصف الثاني	الخلية الثانية من الصف الثاني

محاذاة الجدول. محاذاة محتويات الخلايا

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

.

باستخدام سمة المحاذاة ، يمكنك وضع الجدول على الجزء الأيسر أو الأيمن (محاذاة = "يسار" ومحاذاة = "يمين") من نافذة المتصفح ( عنصر الوالدين) أو في وسطها (محاذاة = "المركز").

محاذاة محتويات الخطوط ( بطاقة شعار

) والخلايا ( بطاقة شعار الذي ينشئ صف جدول لا يحتوي على سمات الارتفاع والعرض. يتوافق ارتفاع الصف مع ارتفاع الخلايا الموجودة فيه. وعرض الصف يساوي عرض الجدول.

يتم تحديد قيم الطول والعرض بالبكسل أو كنسبة مئوية من المساحة الخالية. لتعيين القيم:

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

تم تحديد عدد صحيح موجب متبوعًا برمز٪.

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

) أفقياً وتحديد موقعه - أعلى أو أسفل الجدول.

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

ارتفاع وعرض الجدول والخلايا

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

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

بطاقة شعار

) أفقيًا أيضًا باستخدام سمة المحاذاة ، وعموديًا باستخدام سمة valign: تأخذ سمة المحاذاة القيم لليسار واليمين والوسط والضبط ، والتي تحدد محاذاة محتويات الصفوف والخلايا إلى اليسار واليمين والوسط والعرض ، على التوالي ؛ تحدد سمة valign ، التي تأخذ القيم أعلى وأسفل ومتوسط ​​، محاذاة محتويات الصفوف والخلايا إلى أعلى وأسفل ومتوسط ​​على التوالي. تعمل سمة المحاذاة أيضًا على محاذاة العنوان ( بطاقة شعار

>

كما ترى من المثال: من خلال تحديد عرض إحدى خلايا العمود ، فإنك بذلك تحدد عرض العمود بأكمله ؛ ومن خلال تحديد ارتفاع إحدى الخلايا في صف ، يمكنك تعيين ارتفاع الصف بأكمله.

حدود الجدول والخلية

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

سمة الحدود للعلامة

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

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

تم تعيين سماكة الحدود للجدول فقط. يكون عرض الحد حول الخلايا دائمًا 1 بكسل ( اما في عداد المفقودين).

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

تحدد سمة bordercolor لون الحد وتزيل التأثير ثلاثي الأبعاد. يمكن استخدام السمة لتعيين لون حد الجدول ( بطاقة شعار

)، خطوط ( بطاقة شعار ) أو خلايا ( بطاقة شعار - سطر جدول أتش تي أم أل
- العمود (الخلية) في جدول html.

لنحاول الآن دمج جميع العلامات في جدول واحد. للقيام بذلك ، سننشئ جدول html يتكون من صفين وثلاثة أعمدة:

من السهل جدًا عمل جدول html. أولاً ، دعنا نضع علامات الجدول نفسه ، نضع بداخله العدد المطلوب من الصفوف (في مثالنا ، صفان):

). لا تدعم جميع المستعرضات سمة لون الحدود ولذلك لا يوصى بها. لتعيين لون الحدود ، من الأفضل استخدام الأنماط ( إنه موجود بالفعل في CSS). لم يتم تحديد سمة الحدود. لذلك ، لا توجد حدود. يبلغ سمك حد الجدول 3 بكسل. الخلايا لها حدود 1 بكسل! عرض جزئي للحدود يمكن عرض حد الجدول والإطار المحيط بالخلايا جزئيًا. سمة إطار العلامة يشير إلى مكان رسم حدود الجدول. تحدد سمة القواعد كيفية عرض حدود الخلية. إطار "500 بكسل" =قواعد "hsides" = "cols"> المثبتة عرضي حدود الجدول و الحدود المعروضة بين مكبرات الصوت المسافات البادئة داخل وخارج الخلايا عند تنسيق الجداول بتنسيق HTML ، قد يكون من المفيد استخدام المسافات البادئة داخل الخلايا وخارجها لتصور بعض المعلومات وتسهيل قراءتها. الحشو الداخلي - من حدود الخلية إلى محتواها ، يتم تعيينه بواسطة سمة cellpadding للعلامة . الحشو الخارجي - المسافة بين حدود الخلايا المجاورة والمسافة من حدود الخلايا إلى حد الجدول ، والتي يتم تعيينها بواسطة سمة تباعد الخلايا للعلامة . قيم السمات هي أعداد صحيحة موجبة تحدد المسافة بالبكسل. المسافة من محتويات الخلية لحدودهم 10 بكسل المسافة بين الخلايا ومن الخلايا إلى حد الجدول 25 بكسل دمج الخلايا عند تصميم الجداول وتنسيقها في HTML ، غالبًا ما يكون من الضروري دمج الخلايا المجاورة. وإذا نشأت مثل هذه الحاجة ، فعليك استخدام سمات colspan و rowspan للعلامة	. تحدد السمة colspan عدد الخلايا المراد دمجها أفقيًا ، وتحدد السمة rowspan عدد الخلايا المراد دمجها رأسياً. كلتا السمتين لهما معنى إذا كان الجدول يحتوي على صفوف متعددة. 1 2 3 4 1 2 3 4 خلفية الجدول. خلفية خلايا الجدول في HTML ، من الممكن تعيين خلفية عامة للجدول بأكمله ، بالإضافة إلى خلفية لخلية محددة بشكل منفصل. سمة خلفية العلامة يحدد الصورة التي ستكون صورة خلفية الجدول. قيمة السمة هي عنوان الملف مع الصورة - المسار المطلق أو النسبي للملف (). سمة علامة Bgcolor يضبط لون خلفية الجدول. يمكن ضبط اللون بطريقتين () باستخدام نفس السمات ، اضبط صورة الخلفية ولون الخلفية لأي خلية في الجدول ( بطاقة شعار , و . يمكن استخدام أي منها لتغيير بعض خصائص صف واحد أو أكثر من صفوف الجدول: هذا ، مرة أخرى ، هو محاذاة محتويات الخلايا في الصفوف أفقيًا وعموديًا باستخدام سمات المحاذاة و valign ، على التوالي ؛ وتعيين لون خلفية الخلايا باستخدام سمة bgcolor. هناك بعض الفروق الدقيقة التي يجب أن تكون على دراية بها عند استخدام هذه العلامات التي تحدد الاختلافات بينها. العلامات و يجب وضعها قبل العلامة ، مباشرة بعد علامة فتح الجدول ). اللون الوردي الداكن هو لون خلفية الجدول. صورة الخلفية لخلية فردية هي السماء! تذكر أيضًا وجود سمة cols للعلامة والتي تخبر المتصفح بعدد الأعمدة في الجدول. يسمح استخدام السمة cols للمتصفح بعرض محتويات الجدول بشكل أسرع. تحرير الجدول في هذا القسم ، سنلقي نظرة على العلامات المستخدمة عند تحرير عناصر جدول متعددة مرة واحدة. يمكن تقسيم هذه العلامات إلى مجموعتين. تتضمن المجموعة الأولى العلامات و ... إنها متطابقة تقريبًا وتعمل على تعيين بعض الخصائص وتغيير خصائص عمود واحد أو أكثر في الجدول. يتم وضع إحدى هذه العلامات مباشرة بعد العلامة ... لنفترض أن هذه علامة . استخدام سمة الامتداد للعلامة الإشارة إلى عدد الأعمدة التي سيتم تطبيق سمات المحاذاة أو الصفقات أو العرض عليها ( محاذاة محتويات خلايا العمود أفقيًا أو رأسيًا أو تحديد عرض الأعمدة). إذا كانت سمة span في العلامة غائب ، ثم خصائص واحد - سيتم تغيير العمود الأول من الجدول. على الاستخدام الثاني للعلامة يتم تعيين الخصائص لما يلي ( التالي - إذا كانت سمة النطاق مفقودة) أعمدة الجدول ، إلخ. عرض "2" ="70 بكسل"> 1 2 3 4 5 1 2 3 4 5 تتضمن المجموعة الثانية من العلامات أيضًا علامات متطابقة تقريبًا مع بعضها البعض. ... سلاسل ملفوفة في علامة معروضة في أعلى الجدول ، والأسطر الموجودة في العلامة سيكون موجودًا في أسفل الجدول. يمكن تطبيق كلتا العلامتين مرة واحدة فقط في نفس الجدول. بطاقة شعار يمكن استخدامها عدة مرات داخل العلامة . "right" bgcolor = "# 00FF33"> 1 2 3 4 5 6 7 8 9 10 1 2 3 4 5 6 7 8 9 10 1. ما هي جداول HTML ولماذا هناك حاجة إليها؟ جداول أتش تي أم أل- يعد هذا أحد المكونات الأساسية لكل صفحة html وبالتالي لكل موقع. على سبيل المثال ، يتكون الموقع الذي يحتوي على الموقع بأكمله من جداول: صور ونصوص وروابط ونماذج تسجيل - يتم وضع كل شيء بالنسبة لبعضها البعض باستخدام جداول html (في الواقع ، يوجد الموقع بأكمله أيضًا في جدول واحد كبير). 2. ما هي علامات جداول أتش تي أم أل؟ العلاماتتحديد جدول html مكتوب على النحو التالي: ولكن بما أننا نعلم ، تتكون جميع الجداول من صفوف وأعمدة (خلايا) ، لذلك تحتاج إلى تعيين علامات لها أيضًا:

ثم نقوم بتقسيم كل صف إلى خلايا باستخدام علامات الأعمدة:

- الخلية 1.1
- الخلية 1.2
- الخلية 1.3


- الخلية 2.1
- الخلية 2.2
- الخلية 2.3

في الواقع ، الرقم الأول في الملصقات هو رقم الصف ، والثاني هو رقم الخلية (1 × 2 هو الصف الأول ، الخلية الثانية ، إلخ).

3. كيفية ضبط لون خلفية جداول html؟

الآن دعنا نتعرف على كيفية تعيين خلفية الجدول أو كل خلية على حدة.

لذلك ، لتعيين الخلفية ، يتم استخدام السمة bgcolor = "background_color".

على سبيل المثال ، إذا احتجنا إلى تعيين لون واحد للوحة بأكملها ، فسيتم ذلك على النحو التالي:

bgcolor = "background_color">

- الخلية 1.1
- الخلية 1.2
- الخلية 1.3


- الخلية 2.1
- الخلية 2.2
- الخلية 2.3

على سبيل المثال ، إذا كان من الضروري عمل لوحة صفراء ، فإننا نكتب:

إذا لزم الأمر اضبط لون خلفية الصفجدول html ، ثم السمة bgcolor = "background_color"تنطبق على العلامة

نحتاج إلى ضبط عرض الجدول ، لكن في بعض الأحيان نحتاج إلى تغيير عرض الجدول. ونحن بحاجة لمعرفة ذلك. كيفية تغيير عرض الجدول. يمكن تغيير عرض الجدول بالبكسل أو كنسبة مئوية ... سنتعامل الآن مع تغيير عرض الجدول بلغة html! آخر مرة صنعنا فيها جدولًا بعرض 500 بكسل ، بثلاثة أعمدة وثلاثة صفوف! (تذكر الحد = "سمة واحدة - وهي المسؤولة عن الحد) هنا رمز هذا الجدول ؛ الآن ، لفهم كيفية تغيير عرض جدول أو عمود ، سنقوم بتغيير وإضافة بعض الأرقام إلى الكود الخاص بنا عرض الجدول = "500" - التغيير إلى 599. هذه الصفحة مبنية على جداول وعرض مربع النص ، أي حيث توجد هذه الكلمات يساوي 600 بكسل. سوف نحصل على: سيكون عرض العمود رقم 2 200 بكسل: عرض العمود رقم 3 سيكون 299 بكسل: ونحصل على الكود التالي: نحن ننظر إلى طاولتنا الآن ، دعنا نغير قيمة سمة العرض إلى النصف = 50٪. ننظر إلى طاولتنا ، وهي 50٪. هذا كل ما أردت أن أخبرك به عن كيفية تغيير عرض الطاولة. الآن دعنا ننتقل إلى ارتفاع الطاولة! يبلغ المتصفح عن اكتمال الجدول. يتكون أي جدول من أعمدة وصفوف. بطاقة شعار
خلية على التوالي. وفقًا لذلك ، نظرًا لتضمين العديد من الخلايا في صف واحد ، سيكون هناك العديد من الأعمدة في الجدول. بطاقة شعار	يقوم أيضًا بإنشاء خلية. اختلافها عن العلامة	في تلك الخلية التي تم إنشاؤها بواسطة العلامة	عبارة عن خلية - عنوان: يتم توسيط محتواها ، وإذا كان نصًا ، يعرضه المستعرض بخط غامق. محتوى الخلية التي تم إنشاؤها بواسطة العلامة	بشكل افتراضي ، يقع في الجزء الأيسر منه. بطاقة شعار

bgcolor = "# FFFF00"> bgcolor = "# 0000FF"> 1.1 1.2 1.3 2.1 2.2 2.3

1.1	1.2	1.3
2.1	2.2	2.3

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

بنفس الطريقة ، يتم تعيينه و لون كل خلية على حدة... على سبيل المثال ، إذا كنت بحاجة إلى تغيير لون الخلية 1.2 إلى اللون الأزرق ، فداخل العلامة الافتتاحية ينسب bgcolor = "background_color":

4. كيف يمكن ضبط حجم عرض وارتفاع خلايا جدول html؟

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

ارتفاع- السمة التي تحدد ارتفاع الخلية

العرض- السمة التي تحدد عرض الخلية

والآن مع مثال:

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

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

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

أيضًا ، غالبًا ما يتعين عليك ضبط الارتفاع والعرض. بالنسب المئوية:

محتويات الخلية

إذا قمنا بتعيين عرض الخلية على 40 بالمائة ، كما في مثالنا ، فهذا يعني أن لدينا 60 بالمائة متبقية لبقية الخلايا ، أي يجب ألا يتجاوز مجموع عرضها 60 بالمائة. الأمر بسيط للغاية: في المجموع ، لدينا 100٪ فقط. نعتبر: 100-40 = 60.

5. كيفية محاذاة النص داخل جدول html؟

الآن دعنا نتعرف على كيفية محاذاة النص في جدول html إلى اليسار واليمين والوسط.

يتم ذلك باستخدام السمة:

محاذاة = "يسار"- محاذاة النص الموجود داخل جدول html إلى اليسار

محاذاة = "مركز"- محاذاة نص جدول html في المنتصف

محاذاة = "الحق"- محاذاة النص الموجود داخل جدول html إلى اليمين

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

على سبيل المثال ، تبدو كود html للجدول الذي يتم توسيط نصه كما يلي:

محاذاة = "مركز"> محاذاة = "يسار"> 1x1 محاذاة = "مركز">1.2 محاذاة = "يمين"> 1x3 محاذاة = "يسار">2.1 محاذاة = "مركز"> 2x2 محاذاة = "يمين">2.3

عن طريق كتابة السمة محاذاة = "مركز"في الافتتاح

، لقد قمنا بمحاذاة جدول html إلى وسط صفحة المتصفح.

هذه هي النتيجة التي تحصل عليها في المتصفح:

1 × 1	1.2	1 × 3
2.1	2 × 2	2.3

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

يتم تحديد المحاذاة العمودية بواسطة السمة:

valign = "أعلى"- سيتم وضع المحتوى في أعلى الخلية

valign = "وسط"- سيتم توسيط المحتوى في الخلية

valign = "أسفل"- سيكون المحتوى موجودًا في الجزء السفلي من الخلية

لنلقِ نظرة على هذه السمات باستخدام مثالنا:

valign = "أعلى"> 1x1 1.2 valign = "أعلى"> 1x3 valign = "أسفل">2.1 2 × 2 valign = "أسفل">2.3

هذا ما نحصل عليه إذا نظرنا إلى نتيجة تشغيل السمات في المتصفح. محاذاةو فالين:

1 × 1	1.2	1 × 3
2.1	2 × 2	2.3

6. كيفية الجمع بين الخلايا والأعمدة في جدول html؟

في هذا الجزء من مقالتنا ، سنتحدث عن السمات كولسبانو rowspan.

كولسبان- تحدد عدد الأعمدة التي تنطبق عليها هذه الخلية

rowspan- تحدد عدد الصفوف التي تنطبق عليها هذه الخلية

القيم كولسبانو rowspanيمكن أن تأخذ قيمة من 2 أو أكثر ، أي يمكن تمديد الخلية إلى عمودين أو أكثر (صفوف).

الآن ، باستخدام المثال ، سنقوم بتمديد خلية 1x1 إلى عمودين (خلايا). للقيام بذلك ، سنستخدم السمة colspan = "2" ، مع تخصيصها للخلية 1x1. سيبدو الرمز كما يلي:

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

يجب التعامل مع سمات colspan و rowspan بحذر شديد. يمكن أن يتسبب خطأ ما في "الانتقال" إلى موقعك.

الآن بعد أن تعاملنا مع المعامل colspan، فلنتعامل مع معلمة rowspan. مبدأ العملية هو نفسه هنا:

كولسبان = "2"> 1.1 1.2 2.1 2.2

1.1		1.2
2.1	2.2

وهكذا ، تعلمنا كيفية دمج الخلايا في صفوف وأعمدة جداول html.

7. كيفية إزالة المسافات البادئة أو إضافتها أو تغييرها وكيفية تعيين حد لجدول HTML؟

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

border = "عرض الحد بالبكسل"- يحدد عرض الإطار

لون الحدود = "لون الحدود"- يحدد لون الإطار

على سبيل المثال ، لنجعل جدول html حدًا أسود بعرض 1 بكسل.

لهذا الوسم

إضافة سمات:

يمكننا الآن رؤية المساحة المتروكة بين خلايا جدول html والحشو من الحواف الداخلية للخلايا إلى النص. لذلك ، يمكننا إدارة هذه المسافات البادئة دون أي مشاكل. لهذا الغرض السمات:

تباعد الخلية = "عرض المساحة المتروكة بالبكسل"- مسافة بادئة بين الخلايا

الحشوة الخلوية = "عرض المساحة المتروكة بالبكسل"- مسافة بادئة داخل الخلية (من حافة الخلية إلى نص وصور وروابط ...)

على سبيل المثال ، دعنا نضع مسافة بادئة بمقدار 10 بكسل بين الخلايا ، ونزيد المسافة البادئة من حافة الخلية إلى النص إلى 20 بكسل. يتم ذلك على النحو التالي:

وسادة الخلية = "20"تباعد الخلايا = "10"> 1.1 1.2 2.1 2.2

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

1.1		1.2
2.1	2.2

إذا كنت بحاجة إلى إزالة المسافة البادئة تمامًا ، فما عليك سوى وضعها وسادة الخلية = "0"و تباعد الخلايا = "0".

8. كيفية إدراج جدول HTML في جدول آخر؟

نحن نقترب من المرحلة الأخيرة من دراسة جداول html. الآن سوف نتعلم كيفية إدراج جدول داخل جدول آخر.

على سبيل المثال ، داخل الخلية 1.2 سنقوم بإدراج جدول جديد يتكون من صف واحد وعمودين. في جدول html الداخلي ، سنقوم بتعيين حد أحمر 2 بكسل ومسافة 0 بكسل بين الخلايا. أيضًا ، سنضع الجدول الداخلي في أعلى الخلية.

يتم ذلك بكل بساطة:

1.1 3.1 3.2 2.1 2.2

إليكم ما حدث نتيجة التحولات الجديدة لطاولتنا (الخلايا الحمراء - جدول داخلي موجود داخل طاولة كبيرة):

1.1		3.1 3.2
2.1	2.2

في هذه المرحلة ، سننتهي من هذه المقالة. أعتقد أنه تبين أنه كان ناجحًا وليس من الصعب فهمه ، وآمل ألا تواجهك المزيد من المشاكل مع الجداول.

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

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

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

1. حدود الجدول الحدود

يتم عرض الجدول والخلايا الموجودة بداخله افتراضيًا في المستعرض بدون حدود مرئية. حدود الجدولالتي حددتها خاصية الحدود:

الجدول (الحد - الانهيار ؛ / * إزالة المسافات الفارغة بين الخلايا * / الحدود: 1 بكسل رمادي خالص ؛ / * تعيين حد خارجي 1 بكسل باللون الرمادي للجدول * /)

حدود خلايا العنوانمن كل عمود يتم تعيينه للعنصر الرابع:

ث (الحد: 1 بكسل رمادي صلب ؛)

حدود الخليةيتم تعيين أجسام الجدول لعنصر td:

TD (الحدود: 1 بكسل رمادي صلب ؛)

لا يتم مضاعفة عرض حدود الخلايا المجاورة ، لذلك يمكنك تعيين الحدود للجدول بأكمله بالطريقة التالية:

Th ، td (الحد: 1 بكسل رمادي صلب ؛)

يمكن تحديد الحد الخارجي للجدول بإعطائه عرضًا أكبر:

الجدول (الحد: 3 بكسل رمادي صلب ؛)

يمكن تعيين الحدود جزئيًا:

/ * تعيين حد خارجي رمادي 3 بكسل للجدول * / الجدول (أعلى الحدود: 3 بكسل رمادي صلب ؛) / * تعيين حد رمادي 1 بكسل لخلية جسم الجدول * / td (الحد السفلي: 1 بكسل رمادي صلب ؛)

يمكنك قراءة المزيد عن خاصية الحدود.

2. كيفية ضبط عرض الجدول وارتفاعه

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

عرض الجدول والعمودمجموعة باستخدام خاصية العرض. إذا تم تحديد الجدول (العرض: 100٪ ؛) للجدول ، فسيكون عرض الجدول مساويًا لعرض كتلة الحاوية التي يوجد بها.

يتم تحديد عرض الجدول والأعمدة عادةً بـ px أو٪ ، على سبيل المثال:

الجدول (العرض: 600 بكسل ؛) th (العرض: 20٪ ؛) td: الطفل الأول (العرض: 30٪ ؛)

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

Th ، TD (الحشوة: 10 بكسل 15 بكسل ؛)

3. كيفية ضبط خلفية الجدول

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

4. أعمدة الجدول

يركز نموذج جدول CSS بشكل أساسي على السلاسل (الصفوف) التي تم تشكيلها باستخدام العلامة

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

باستخدام العلامة

يمكنك تعيين الخلفية لأي عدد من الأعمدة ؛

باستخدام الجدول td: الطفل الأول ، الجدول td: محدد الطفل الأخير ، يمكنك نمط العمود الأول أو الأخير من الجدول (باستثناء الخلية الأولى من رأس الجدول) ؛

باستخدام محدد الجدول td: nth-child (قاعدة اختيار العمود) ، يمكنك نمط أي أعمدة في الجدول.

يمكنك قراءة المزيد عن محددات CSS.

5. كيفية إضافة عنوان إلى الجدول

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

...

الجدول رقم 1

شركة	س 1	س 2	س 3	س 4

التسمية التوضيحية (جانب التسمية التوضيحية: أسفل ؛ محاذاة النص: اليمين ؛ الحشو: 10 بكسل 0 ؛ حجم الخط: 14 بكسل ؛) أرز. 2. مثال على عرض العنوان تحت الجدول

6. كيفية إزالة الفجوة بين إطارات الخلايا

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

بناء الجملة

الجدول (انهيار الحدود: الانهيار ؛)
أرز. 3. مثال على الجداول التي تحتوي على حدود خلايا مدمجة ومقسمة

7. كيفية زيادة المسافة بين حدود الخلية

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

بناء الجملة

الجدول (انهيار الحدود: منفصل ؛ تباعد الحدود: 10 بكسل 20 بكسل ؛) الجدول (انهيار الحدود: منفصل ؛ تباعد الحدود: 10 بكسل ؛)
أرز. 4. مثال على جداول بها فجوات متزايدة بين إطارات الخلايا

8. كيفية إخفاء خلايا الجدول الفارغة

تقوم خاصية الخلايا الفارغة بإخفاء الخلايا الفارغة أو إظهارها. يؤثر فقط على الخلايا التي لا تحتوي على أي محتوى. إذا تم تحديد خلفية لخلية ، وكان الجدول (border-collapse: collapse؛) محددًا للجدول ، فلن تكون الخلية مخفية. وارث.

شركة	س 1	س 2	س 3
مايكروسوفت	20.3	30.5
متصفح الجوجل	50.2	40.63	45.23

جدول (الحد: 1 بكسل صلب # 69 ج ؛ انهيار الحدود: منفصل ؛ خلايا فارغة: إخفاء ؛) th ، td (الحد: 2 بكسل صلب # 69c ؛) أرز. 5. مثال على إخفاء خلية جدول فارغة

9. تخطيط تخطيط الجدول باستخدام خاصية تخطيط الجدول

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

بناء الجملة

الجدول (تخطيط الجدول: ثابت ؛)

10. أفضل تخطيطات الجدول

1. بساطتها الأفقية

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

الموظف	مرتب	علاوة	مشرف
ستيفن سي كوكس	$300	$50	بوب
جوزفين تان	$150	-	آني
جويس مينغ	$200	$35	آندي
جيمس أ. بنتل	$175	$25	آني

جدول (عائلة الخطوط: "Lucida Sans Unicode" ، "Lucida Grande" ، Sans-Serif ؛ حجم الخط: 14 بكسل ؛ الخلفية: أبيض ؛ الحد الأقصى للعرض: 70٪ ؛ العرض: 70٪ ؛ انهيار الحدود: الانهيار ؛ النص - محاذاة: يسار ؛) th (وزن الخط: عادي ؛ اللون: # 039 ؛ الحد السفلي: 2 بكسل خالص # 6678b1 ؛ الحشو: 10 بكسل 8 بكسل ؛) td (اللون: # 669 ؛ الحشو: 9 بكسل 8 بكسل ؛ الانتقال: 3 ثوانٍ خطي ؛) tr: hover td (color: # 6699ff ؛)

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

Td (border-bottom: 1px solid #ccc؛ color: # 669؛ padding: 9px 8px؛ transfer: .3s linear؛) / * باقي الكود كما في المثال أعلاه * /

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

Th (font-weight: normal؛ color: # 039؛ padding: 10px 15px؛) td (color: # 669؛ border-top: 1px solid # e8edff؛ padding: 10px 15px؛) tr: hover td (background: # e8edff ؛)

2. بساطتها العمودية

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

Th (font-weight: normal؛ border-bottom: 2px solid # 6678b1؛ border-right: 30px solid #fff؛ border-left: 30px solid #fff؛ color: # 039؛ padding: 8px 2px؛) td (border- اليمين: 30 بكسل صلب #fff ؛ الحد الأيسر: 30 بكسل صلب #fff ؛ اللون: # 669 ؛ الحشو: 12 بكسل 2 بكسل ؛)

3. نمط "Box"

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

Th (font-size: 13px؛ font-weight: normal؛ background: # b9c9fe؛ border-top: 4px solid #aabcfe؛ border-bottom: 1px solid #fff؛ color: # 039؛ padding: 8px؛) td (background) : # e8edff ؛ الحد السفلي: 1 بكسل #fff ؛ اللون: # 669 ؛ الحد الأعلى: 1 بكسل صلب شفاف ؛ الحشو: 8 بكسل ؛) tr: hover td (background: #ccddff ؛)

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

جدول (مجموعة الخطوط: "Lucida Sans Unicode" ، "Lucida Grande" ، Sans-Serif ؛ حجم الخط: 14 بكسل ؛ الحد الأقصى للعرض: 70٪ ؛ العرض: 70٪ ؛ محاذاة النص: المركز ؛ تصغير الحدود: الانهيار ؛ الحد الأعلى: 7 بكسل صلب # 9baff1 ؛ الحد السفلي: 7 بكسل صلب # 9baff1 ؛) th (حجم الخط: 13 بكسل ؛ وزن الخط: عادي ؛ الخلفية: # e8edff ؛ الحد الأيمن: 1 بكسل صلب # 9baff1 ؛ حد- اليسار: 1 بكسل صلب # 9baff1 ؛ اللون: # 039 ؛ الحشو: 8 بكسل ؛) td (الخلفية: # e8edff ؛ الحد الأيمن: 1 بكسل صلب #aabcfe ؛ الحد الأيسر: 1 بكسل صلب # aabcfe ؛ اللون: # 669 ؛ الحشو: 8 بكسل ؛)

4. أفقي حمار وحشي

طاولة زيبرا تبدو جذابة وسهلة الاستخدام. يمكن أن يكون لون الخلفية التكميلي بمثابة إشارة مرئية للأشخاص لقراءة الجدول.

ث (وزن الخط: عادي ؛ اللون: # 039 ؛ المساحة المتروكة: 10 بكسل 15 بكسل ؛) td (اللون: # 669 ؛ الحد الأعلى: 1 بكسل صلب # e8edff ؛ الحشو: 10 بكسل 15 بكسل ؛) tr: nth-child (2n) ( الخلفية: # e8edff ؛)

5. أسلوب الجريدة

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

الجدول (الحد: 1 بكسل صلب # 69 ج ؛) ث (وزن الخط: عادي ؛ اللون: # 039 ؛ الحد السفلي: 1 بكسل متقطع # 69 ج ؛ الحشو: 12 بكسل 17 بكسل ؛) td (اللون: # 669 ؛ الحشو: 7 بكسل 17 بكسل ؛ ) tr: hover td (background: #ccddff ؛)

الجدول (الحد: 1 بكسل صلب # 69 ج ؛) ث (وزن الخط: عادي ؛ اللون: # 039 ؛ الحشو: 10 بكسل ؛) td (اللون: # 669 ؛ أعلى الحدود: 1 بكسل متقطع #fff ؛ الحشو: 10 بكسل ؛ الخلفية: #ccddff؛) tr: hover td (background: # 99bcff؛)

الجدول (الحد: 1px صلب # 6cf ؛) th (font-weight: normal؛ font-size: 13px؛ color: # 039؛ text-transform: uppercase؛ border-right: 1px solid # 0865c2؛ border-top: 1px solid # 0865c2 ؛ الحد الأيسر: 1 بكسل ثابت # 0865c2 ؛ الحد السفلي: 1 بكسل صلب #fff ؛ الحشو: 20 بكسل ؛) td (اللون: # 669 ؛ الحد الأيمن: 1 بكسل متقطع # 6cf ؛ الحشو: 10 بكسل 20 بكسل ؛)

6. خلفية الجدول

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

Png ") 98٪ 86٪ no-repart؛) th (font-weight: normal؛ font-size: 14px؛ color: # 339؛ padding: 10px 12px؛ background: white؛) td (color: # 669؛ border- أعلى: 1 بكسل أبيض خالص ؛ الحشو: 10 بكسل 12 بكسل ؛ الخلفية: rgba (51 ، 51 ، 153 ، .2) ؛ الانتقال: .3 ثانية ؛) tr: hover td (الخلفية: rgba (51 ، 51 ، 153 ، .1) ؛ )

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

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

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

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

في مثال ، يبدو مثل هذا.

الجدول (العرض: 500 بكسل ، الارتفاع: 100 بكسل ؛)

النتيجة في المتصفح:

كود كامل:

جدول أبعاد

1	2	3	4	5
1	2	3	4	5
1	2	3	4	5

يمكن تحديد قيم عرض الجدول وارتفاعه كقيمة مطلقة (بالبكسل) وقيمة نسبية - بالنسبة المئوية. على سبيل المثال ، 20 بكسل و 20٪ على التوالي.

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

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

العرض: تلقائي ؛

الارتفاع: تلقائي ؛

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

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

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

يتم تغيير حجم الخلية باستخدام نفس خصائص CSS مثل أحجام الجدول ، وهي: العرضو ارتفاع.

لإضافة أنماط إلى الخلايا ، يمكنك استخدام أحد الخيارين التاليين:

1. قم بتعيين أسماء فئة فردية للخلايا. سيبدو بالشكل التالي: class = "cell-50px"

   وبعد ذلك ، يجب تطبيق الأنماط على هذه الفئات.

2. استدعاء السمة نمط، حيث يتم كتابة كود CSS الضروري.

من الناحية العملية ، سيبدو الخيار الثاني كما يلي:

...

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

جدول أبعاد

1	2	3	4	5
1	2	3	4	5
1	2	3	4	5

النتيجة في المتصفح:

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

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

ث (حجم الخط: 30 بكسل ؛)

بهذا ينتهي هذا الدرس. أقترح أن تفكر مليًا في واجبك المنزلي. ادرسها بعناية وتوقع. أتمنى لك كل خير!

 

---

يقرأ:
أسرار علم الأعداد: كيفية معرفة تاريخ الوفاة قام نجم روسيا بحماية المعنى المقدس لرمز الكنيسة السلافية القديمة رونا هيرا - المعنى الرئيسي والتفسير ماذا يعني اسم اليزابيث ، الشخصية والمصير تفسير الأحلام للسيدة هاس: تفسير الأحلام بالأرقام