توسيط النص في أعمدة الجدول مع colgroups

تحد شائع في جداول HTML هو محاذاة النص مركزيًا في أعمدة محددة. على الرغم من استخدام

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

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

#myTable tbody td { text-align: center }
#myTable tbody td:first-child { text-align: left }

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