تنظيم الـمـحتوى
يمكنك تنظيم المحتوى في لغة HTML في عدة أشكال، يمكنك مثلا وضعه في صورة
قائمة مرتبة، أو في صورة شجرة (مخطط هرمي) وأهم أنواع تنظيم المحتوى هي
الجداول.
يمكنك عمل القائم المرتبه باستخدام الوسم ol والغير مرتبة ul بحيث توضع
البنود بينهما وكل بند يحدد بالوسم li، ويمكنك تحديد نوع الترقيم في
القوائم المرتبة بالحروف أو بالأقام العربية أو الرومانية وغيرها عبر
الخاصية type وتأخذ أحد القيم التالية :
1 : 1, 2, 3, 4, ..
a : a, b, c, d, ..
A : A, B, C, D, ..
i : i, ii, iii, iv, ..
I : I, II, III, IV, ..
وفي القوائم الغير مرتبة :
• circle :
o
• square :
• disc :
•
ويمكن وضع قائمة داخل قائمة لتشكيل المخططات الهرمية.
<ul
type="circle">
<li>Pepsi
<li>Crash
<li>7
Up
</
ul>
<ol
type="I">
<li>Windows
(85%)
<li>Linux
(10%)
<li>Mac
(3%)
<li>Other
(2%)
</
ol>
<ol>
<li>American
Companies
<ol>
<li>Microsoft
<li>General
Motors
</
ol>
<li>German
Companies
<ol>
<li>Dubian
<li>BMW
<ul>
<li>6
Class
<li>7
Class
</
ul>
</
ol>
</
ol>
الجداول
تعتبر الجداول من أهم مكونات صفحات HTML، وجميع التصاميم الإحترافية
تستفيد من الجداول لتصميم الصفحة وتوزيع الكائنات عليها وتشكيلها في
القالب الذي يريدونه، يتم إدراج الجدول بالوسم table وداخل الجدول يجب
إدراج صفوف tr وداخل الصفوف توجد البيانات td، يمكن وضع إطار للجدول
بالخاصية border حيث نحدد فيه سماكة الإطار المطلوب 0 تعني دون إطار،
القيمة الإفتراضية للإطار هي 0.
<table border="1">
<tr>
<td>First Row - First Data
<td>First Row - Secound Data
</tr>
<tr>
<td>Secound Raw - First Data
<td>Secound Raw - Secound Data
</tr>
</table>
يمكنك أيضا التحكم بالمسافة بين الخلايا بواسطة الخاصية cellspacing،
والمسافة بين الحدود الداخلية للخلايا ومحتويات الخلايا بواسطة الخاصية
cellpadding.
<table cellspacing="10"
cellpadding="20" border="1">
<tr>
<td>First Cell</td>
<td>Secound Cell</td>
</tr>
</table>
يمكن التحكم بعرض الجدول بالخاصية width وارتفاعه بالخاصية height
وكلاهما يأخذ قيما مطلقة أو نسب مؤية، ويمكن استخدام هذه الخصائص في
الخلايا td أيضا وعند إعطاء الخلايا قيما نسبية فإنها تحسب بالنسبة للصف
الذي هي فيه.
<table width="100%"
height="100%" border="1">
<tr>
<td width="100"
height="40%">First Cell
<td width="100%"
height="40%">Secound Cell
</tr>
<tr>
<td width="100"
height="60%">First Cell
<td width="100%"
height="60%">Secound Cell
</tr>
</table>
يمكن التحكم بلون خلفية الجدول بالخاصية bgcolor ويمكن تعيين صورة في
الخلفية بالخاصية background، يمكن استعمال هذه الخواص في الخلايا td
أيضا، وعند تعيين قيمة bgcolor للجدول مختلفة عن قيمة أحد الخلايا فإن
لون الخلية سيطغى على لون الجدول في تلك الخلية، لأن الخلية موجودة فوق
الجدول في ترتيب الطبقات.
<table border="1" background="sample.gif"
width="90%" height="80%">
<tr>
<td
bgcolor="Yellow">First Cell
<td>Secound Cell
</tr>
</table>
يمكن التحكم بمحاذاة محتوى الخلية أفقيا بالخاصية align ورأسيا بالخاصية
valign، في الخاصية align القيمة left تعني محاذاة لليسار و rigth لليمين
و center بالمنتصف و justify للضبط الكلي تجعل الأسطر مساوية في الطول،
أما الخاصية valign فتأخد القيمة top للأعلى، bottom للأسفل middle
للمنتصف.
<table border="1"
width="90%" height="80%">
<tr>
<td align="right"
valign="bottom">First Cell
<td align="left"
valign="top">Secound Cell
</tr>
</table>
يمكن أيضا وضع جدول داخل جدول، عن طريق وضع الجدول في أحد الخلايا td،
وهنا يحسب عرض الجدول الداخلي النسبي بالنسبة لعرض الخلية التي تحتويه
والموجودة في الجدول الخارجي.
<table
width="95%" border="1">
<tr>
<td>First Table - First Cell
<td>
<table border="1">
<tr>
<td>Secound Table - First Cell
<td>Secound Table - Secound Cell
</tr>
</table>
</tr>
<tr>
<td>
<table border="1">
<tr>
<td>Third Table - First Cell
<td>Third Table - Secound Cell
</tr>
</table>
<td>First Table - Fourth Cell
</tr>
</table>
يمكن أيض دمج الخلايا رأسيا بالخاصيةrawspan وأفقيا بالخاصية colspan،
حيث تحدد في كل منهما عدد الخلايا التي يجب دمجها في الخلية الحالية،
وتستخدم هذه الخصائص في الخلايا td.
<table border="1">
<tr>
<td rowspan="2"
colspan="2">First Cell
<td>Secound Cell
<td>Third Cell
</tr>
<tr>
<td
rowspan="3">Fourth Cell
<td
colspan="2">Fifth Cell
</tr>
<tr>
<td>Sixth Cell
<td>Seventh Cell
<td>Eighth Cell
<td>Nineth Cell
</tr>
</table>