حياك الله أخى ابا آرى
نسيت أسأل هل يجب تلوين الجداول أيضا والكتابة بداخلها أم هذا فقط للتعريف ؟
فهناك طرق مختلفة لكتابة الكود مثلا يمكننا كتابة الكود بهذه الطريقة
<table style="table-layout:fixed;width:600px;">
<tr height="30">
<td width="150">CSS table layout cell 1</td>
<td width="200">CSS table layout cell 2</td>
<td width="250">CSS table layout cell 3</td>
</tr>
</table>
هنا تجد أننا حددنا عرض الجدول 600
وكذلك ارتفاع الجدول 30 بيكسل
وحجم الخلايا كما ترى من 150 الى 250
وهناك طريقة أخرى لكتابة الأكواد وهي :
مثلا نفترض أنك تريد تحديد كل جدول بمقاس ولون محدد
نقوم بإنشاء أكواد الـ CSS بالمقاساات والألوان التى نريدها وهذا هو الكود الذى يجب أن تستخدمه وتكرره مع تغير القيمة واللون
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<meta http-equiv="Content-Language" content="en-us"/>
<style type="text/css">
#customers {
font-family : "Trebuchet MS", Arial, Helvetica, sans-serif;
width : 100%;
border-collapse : collapse;
}
#customers td, #customers th {
font-size : 1em;
border : 1px solid #98bf21;
padding : 3px 7px 2px 7px;
}
#customers th {
font-size : 1.1em;
text-align : left;
padding-top : 5px;
padding-bottom : 4px;
color : #ffffff;
}
#customers tr.alt td {
color : #000000;
background-color : #eaf2d3;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<meta http-equiv="Content-Language" content="en-us"/>
<title>www.abc4web.net</title>
</head>
<body>
<table id="customers">
<tr>
<th width="728" height="10"> </th>
<th rowspan="11" width="160">
</th>
</tr>
<tr>
<td height="90"> </td>
</tr>
<tr class="alt">
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr class="alt">
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr class="alt">
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr class="alt">
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr class="alt">
<td> </td>
</tr>
</table>
<div align="center">
<table border="0" width="150" id="table1" cellspacing="0" cellpadding="0">
<tr>
<td><p>
<a href="http://validator.w3.org/check?uri=referer"><img border="0"
src="http://www.w3.org/Icons/valid-xhtml10-blue"
alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a>
</p>
</td>
<td> <p>
<a href="http://validator.w3.org/check?uri=referer"><img border="0"
src="http://www.w3.org/Icons/valid-xhtml10"
alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a>
</p>
</td>
<td> <p>
<a href="http://jigsaw.w3.org/css-validator/check/referer">
<img style="border:0;width:88px;height:31px"
src="http://jigsaw.w3.org/css-validator/images/vcss-blue"
alt="Valid CSS!" />
</a>
</p>
</td>
<td> <p>
<a href="http://jigsaw.w3.org/css-validator/check/referer">
<img style="border:0;width:88px;height:31px"
src="http://jigsaw.w3.org/css-validator/images/vcss"
alt="Valid CSS!" />
</a>
</p>
</td>
</tr>
</table>
</div>
</body>
</html>
للمشاهدة والتأكد من صحة الأكواد
http://www.abc4web.net/google/tab.htm
طبعا تستطيع أن تقوم بتوزيع الجداول بنفس الطريقة ان شاء الله
مرفق الأمثلة
إن شاء الله إن تفرغت سوف أساعدك لو ماأكملت العمل
موفق بإذن الله ... لك مني أجمل تحية .