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

Size: px

Start display at page:

Download "טבלאות אם נרצה למקם תמונה ומלל זה ליד זה, או רצף של תמונות זו ליד זו כל פריט מיושר לכיוון אחר, נשתמש בטבלאות."

Melinda Barton
6 years ago
Views:

1 1 טבלאות אם נרצה למקם תמונה ומלל זה ליד זה, או רצף של תמונות זו ליד זו כל פריט מיושר לכיוון אחר, נשתמש בטבלאות. <body> </table> <table> טבלה שורה בטבלה Table Row <th> </th> עמודת כותרת תגית עמודה חייבת <td> </td> עמודה בטבלה להימצא בתוך תגית שורה </body> כל התגיות של הטבלה הן מסוג תגית מכילה )מכילות בתוכן( > table1.html <!  סימון הערה <body> > טבלה <! <table > -----> שורת הכותרת - Line Header <! <th> lastname </th> <th> firsname </th> <th> city </th> <! Line # > <td> Yarkoni </td> <td> Yael </td> <td> TLV </td> <! Line # > <td> Efrati </td> <td> Aviv </td> <td> Hifa </td> <! Line # > <td> Nitzan </td> <td> Daniel </td> <td> Modiin </td> </table> </body> </html> lastname firsname city תרגיל 1:.tables צור תיקייה בשם Yarkoni Yael TLV בנה את הטבלה שלהלן. Efrati Nitzan Aviv Daniel Hifa Modiin )שים לב, ברירת המחדל של הטבלה היא ללא מסגרת(. שמור את הקובץ בשם table1.html

2 2 עיצוב הטבלה: עיצוב הטבלה יעשה ב-,css בחלק ה-,head תחת תגית.style מסגרת - :border יש להגדיר גבולות לכל מרכיבי הטבלה: הטבלה,table עמודת הכותרת th ועמודת התוכן.td ניתן להגדיר הגדרת גבול משותפת, ובהמשך לתת הגדרות עיצוב נפרדות לטבלה ולעמודה. <style type = "text/css"> /*-- סגנון גבול הטבלה והתאים --*/ table, th, td { medium; border: */ עובי הקו /* solid; border-style: /* הגבול יהיה קו רציף */ aqua; border-color: /* */ צבע הקו text-align: center; } </style> או בקיצור: קביעת עובי, סגנון והקו בהגדרה מצומצמת: table, td, th { border: 1px solid navy; } רוחב וגובה תאי הטבלה: כדי לשמור על רוחב וגובה אחידים לכל העמודות, ניתן הגדרת רוחב לעמודה, וגובה לשורה. המידות תיקבענו בפיקסלים או ב- % מרוחב וגובה האובייקט שבו מוגדרת העמודה )במקרה זה מגובה ורוחב הטבלה(. td { width: 150px; } tr { height: 50px; } צבע רקע: ניתן להגדיר צבע רקע לטבלה, לשורה ולתא בשורה באמצעות התכונה: background-color אם קובעים צבע רקע לכולם, האחרון בהגדרה הוא זה שיתפוס )כלומר - צבע התא(. באותם תאים ושורות בהם לא נקבע צבע רקע לשורה או לתא יהיה צבע הרקע כצבע הטבלה. בתאים שנקבע להם צבע שונה מצבע השורה יהיה רק צבע התאים בצבע החדש ושאר התאים ישארו בצבע השורה. תמונה: ניתן לקבוע תמונת רקע לתא )שים לב לכתובת התמונה הכולל :)url <td style = "background-image: url('pics/bg1.png');"></td> או לשלב תמונה בתוך תא: <td><img src="pics/wolf.jpg" /></td>

3 3 יישור טבלה: טבלה מיושרת בברירת המחדל לשמאל.left אם נקבע כיוון הדף ל- rtl יהיה יישור ברירת המחדל לימין -.right כדי למרכז את הטבלה, נוכל להשתמש בהגדרת aligh של :html4 הבעיה: תגית זו עומדת לצאת מהתקן והדפדפנים יפסיקו לתמוך בה. או להשתמש באחת הדרכים הבאות: < table align = "center"> לתחום את כל הטבלה בתגית: </caenter> <center> <table> </table> לעטוף את הטבלה בתוך תגית div ולקבוע את רוחב התגית 100%. התגית div מהווה אובייקט בתוך,body ולכן נקבע את אחוז מתוך רוחב ה-,body כלומר 100%(. הטבלה מהווה אובייקט בתוך ה-,div לכן נקבע את מרחק הטבלה משולי התגית כ- 0 ו- auto )מרחק אופקי אוטומטי משוליים ימניים ושמאליים של התגית,div כלומר - ממורכז(: <style> div { width: 100%; } table { margin: 0 auto; } </style> <div> <table> </table> </div> )מרחק אנכי( head body מרווח בין התאים )תכונה של :)table border-spacing: 10px; קובע את עובי המירווח שבין התאים בטבלה. המירווח נקבע בפיקסלים. מרווח בין תכולת התא לדפנות התא )תכונה של :)td td { padding: 15px; } קובע את המירווח שבין התוכן לדפנות התא מכל הכיוונים. אם התא קטן )נקבע בגובה ורוחב( יגדיל את גודל הטבלה כדי שכל התאים יהיה במירווח זה מכל הכיוונים )הפקודה חזקה יותר מפקודת הגובה ורוחב(. תרגיל 2: בנה טבלה בת 4 שורות ו- 5 עמודות: ארץ, עיר, חי, צומח, דומם. מרכז את הטבלה במרכז הדף, במרחק 3 שורות מראש הדף. קבע את צבע הרקע של הדף להיות ירוק בהיר. שנה את המרווח בין התאים ל-.15px שמור את הקובץ בשם table2.html והרץ. קבע את רקע הטבלה להיות תמונה כלשהי. קבע את צבע הרקע של תאי הטבלה להיות צהוב בהיר. שמור והרץ. מה ההבדל בין מצב הטבלה לפני סעיף 6 ואחריו?

4 4 מיזוג תאים: n כשיוצרים טבלה, מספר התאים בכל השורות יהיה כמספר התאים המקסימלי שנקבע מכל השורות. מיזוג תאים יכול להיות לרוחב - עמודות ו/או לגובה - שורות. < td rowspan = "n" > איחוד שורות: < td colspan = "n" > איחוד עמודות: מייצג מספר טבעי )שלם וחיובי( שערכו מ- 2 ועד מספר התאים המקסימלי בשורה. כשממזגים עמודות, יש להגדיר פחות עמודות בשורת המיזוג. באיור: בכל שורה יש 3 עמודות. בשורה 3 מיזגנו שתי עמודות, לכן בשורה זו רק 2 הגדרות td כשממזגים שורות, אין להגדיר את העמודות בשורות הבאות. באיור: בטבלה הוגדרו 3 שורות. בשורה הראשונה בעמודה הראשונה מיזגנו שתי שורות, לכן נגדיר בשורה השנייה עמודה אחת פחות )כי היא הוגדרה בשורה הקודמת(. תרגיל 3: בנה את הטבלה שבדוגמה. שמור את הקובץ בשם table3.html

5 5 תרגילים ב. תרגיל 4: א. פתח את הטבלה שבנית בקובץ table1.html ועצב אותה באופן הבא: טבלה בקו יחיד, בצבע אחד. תאים בקו יחיד בצבע שני. צבע את צבע רקע וצבע הגופן של הכותרת. שנה את סגנון הקו כך שיתקבל קו שונה לפי המוצע להלן: תרגיל 5: בנה דפים המכילים את הטבלאות הבאות: שמור את הקובץ בשם table4.html ו- table5.html

6 תרגיל 6: תרגיל הגשה לציון בנה טבלה שתכיל את מערכת השעות שלך. מזג תאים עבור שיעור כפול.

6 6 תרגיל 6: תרגיל הגשה לציון בנה טבלה שתכיל את מערכת השעות שלך. מזג תאים עבור שיעור כפול. צבע כל מקצוע בצבע משלו. הנחיות עבודה: הטבלה צריכה להיות בעיצוב.css צבע כל שיעור בעיצוב css ברמת התא.(inline) שים לב לבחור גווני רקע וגווני כתב כך שהכתב יהיה בולט )צבע כתב חזק על רקע בגווני פסטל(. <th style = "background-color: lightgreen;"> header 1 </th> <td style = "background-color: lightblue;" rowspan = "2"> 12 </td> למתקדמים: הגדר לכל מקצוע מחלקה שתגדיר את צבע הרקע. צביעת תאים ע"י שימוש במחלקות css עצב כל תא במחלקה המתאימה. עבודה נעימה

CSS תגיות עיצוב - Document Level style sheet. הגדרת עיצוב inline { ;ערך : תכונה ;ערך :תכונה } שם-התגית CSS תכנות בסביבת האינטרנט 1

CSS תגיות עיצוב - Document Level style sheet. הגדרת עיצוב inline { ;ערך : תכונה ;ערך :תכונה } שם-התגית CSS תכנות בסביבת האינטרנט 1 תכנות בסביבת האינטרנט 1 תגיות עיצוב - הגדרות עיצוב לגופן, צבע, יישור וכד'. קיימות חמש רמות לכתיבה והוספת עיצובים:.1 style - In Line עיצוב ברמת התגית..2 sheet - Document Level style עיצוב ברמת המסמך. 3.