טבלאות
 טבלאות מסובכות | td | tr | table | תצוגה בסיסית 












בכדי שכל אתר יראה מקצועי ויפה, יש לבנות אותו בצורה סימטרית לחלוטין. וכדי
להגיע למצב הזה, יש להרכיב את כל עמודי האתר כשכל עמוד הוא טבלה אחת המחולקת לטבלאות
.פנימיות שמחולקות גם הן וכן הלאה
.לכן, חייבים לשלוט במאפייני הטבלה, כדי להעלות את רמת הסדר והתצוגה של האתר

:תצוגה בסיסית של טבלה נראית כך
<table><tr><td>תא</td></table>

table - הגדרת טבלה

:אנחנו מגדירים טבלה, ובה נוכל להוסיף את המאפיינים הבאים <table> כאשר אנחנו רושמים
מגדיר צבע רקע לטבלה, - bgcolor="צבע"
#33445A או צבע בהקסדצימלי red/green  יכול להיות כל שם של צבע 
מגדיר רקע לטבלה הנמצא בכתובת ברשת - background="כתובת"
 .right,left,center מגדיר את מיקום הטבלה במסך, יכול לקבל - align="מיקום"
מגדיר את רוחב הטבלה במסך - width="גודל באחוזים או בפיקסלים"
מגדיר את גובה הטבלה - height="גודל בפיקסלים"
מגדיר את המרווח בין תוכן התא לגבול התא - cellpadding="גודל בפיקסלים"
קובע מרווחרים בין התאים - cellspacing="גודל בפיקסלים"
קובע את עובי גבול הטבלה - border="גודל בפיקסלים"
מגדיר את צבע גבול הטבלה - bordercolor="צבע"
ניתן להגדיר לטבלה צבע כהה ובהיר  - bordercolordark="צבע"
שצבעי הטבלה ינועו ביניהם זה הצבע הכהה
ניתן להגדיר לטבלה צבע כהה ובהיר  - bordercolorlight="צבע"
שצבעי הטבלה ינועו ביניהם זה הצבע הבהיר


tr - שורה בתוך הטבלה
:אנחנו מגדירים שורה בתוך הטבלה, ובה נוכל להוסיף את המאפיינים הבאים <tr> כאשר אנחנו רושמים
מגדיר צבע רקע לטבלה, - bgcolor="צבע"
#33445A או צבע בהקסדצימלי red/green  יכול להיות כל שם של צבע 
 .right,left,center מגדיר את מיקום התוכן בתוך השורה, יכול לקבל - align="מיקום"
מגדיר את גובה השורה - height="גודל בפיקסלים"
מגדיר את צבע גבול השורהה - bordercolor="צבע"
ניתן להגדיר לטבלה צבע כהה ובהיר  - bordercolordark="צבע"
שצבעי הטבלה ינועו ביניהם זה הצבע הכהה
ניתן להגדיר לטבלה צבע כהה ובהיר  - bordercolorlight="צבע"
שצבעי הטבלה ינועו ביניהם זה הצבע הבהיר
 מגדיר את המיקום האנכי של התוכן בשורה, מקבל - valign="מיקום"
baseline או top,bottom,middle







td - תא בתוך שורה
:אנחנו מגדירים תא בתוך השורה, ובו נוכל להוסיף את המאפיינים הבאים <td> כאשר אנחנו רושמים
מגדיר רקע לתא הנמצא בכתובת ברשת - background="כתובת"
מגדיר צבע רקע לטבלה, - bgcolor="צבע"
#33445A או צבע בהקסדצימלי red/green  יכול להיות כל שם של צבע 
 .right,left,center מגדיר את מיקום התוכן בתוך הא, יכול לקבל - align="מיקום"
מגדיר את צבע גבול התא - bordercolor="צבע"
ניתן להגדיר לטבלה צבע כהה ובהיר  - bordercolordark="צבע"
שצבעי הטבלה ינועו ביניהם זה הצבע הכהה
ניתן להגדיר לטבלה צבע כהה ובהיר  - bordercolorlight="צבע"
שצבעי הטבלה ינועו ביניהם זה הצבע הבהיר
מגדיר את רוחב הטבלה במסך - width="גודל באחוזים או בפיקסלים"
מגדיר את גובה הטבלה - height="גודל בפיקסלים"
 מגדיר את המיקום האנכי של התוכן בתא, מקבל - valign="מיקום"
 baseline או top,bottom,middle
לא מקבל ערך מספיק לציינו, ומגדיר לתא לא "להישבר" ולפתוח פס גלילה מיוחד לתא - height
מגדיר לתא "לתפוס" כמה תאים במקום של תא אחד לרוחב הטבלה - colspan="מספר"
מגדיר לתא "לתפוס" כמה תאים במקום של תא אחד לגובה הטבלה - rowspan="מספר"



טבלאות מסובכות
colspan/rowspan כדי ליצור טבלאות מורכבות יותר, ונוחות יותר, נשתמש הרבה במאפיינים

: colspan לדוגמה, טבלה זו נעשה ע"י המאפיין
תא שני שורה ראשונה
תא ראשון שורה ראשונה
תא ראשון שורה שניה המכיל שני תאים

:נרשום זאת כך
<table border="1"><tr><td>תא שני שורה ראשונה</td>
<td>תא ראשון שורה ראשונה</td></tr>
<tr><td colspan="2">תא ראשון שורה שניה המכיל שני תאים</td>
</tr></table>

:ניתן דוגמה לטבלה מסובכת יותר
0
0
0
0
0
0
0
0
0
0
0
0

:כך נרשום זאת

<table border="1"><tr><td>0</td><td>0</td><td>0</td><td>0</td></tr>
<tr><td colspan="3">0</td><td>0</td></tr>
<tr><td rowspan="2">0</td><td colspan="2">0</td><td>0</td></tr>
<tr><td>0</td><td>0</td><td>0</td></tr></table>

:דוגמה לטבלה עם מאפיינים רבים

בלה בלה בלה בלה
בלה
בלה






:ככה נכתוב טבלה כזו
<table width="60%" bgcolor="bround" border="2" cellpadding="5"
 align="right" bordercolor="black">
 <tr align="left" bgcolor="red" valign="bottom">
 <td nowrap colspan="2" width="100">בלה בלה בלה בלה</td></tr>
<tr><td>בלה</td><td>בלה</td></tr></table>

חזרה למעלה




חזרה ל מדריך html ל לימוד html