שימוש ב- HTML בטבלה

מחשבים

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

בעבר, כמעט כל מנהלי האתרים השתמשו בטבלאות עבור פריסת האתר. בתחילה, טבלאות עבור זה לא הומצאו. לכן, לסימון האתר, עליך להשתמש באלמנט div block.

אם אתה לא רוצה להישאר טירון,להתרגל לעשות הכל נכון מיד. זה מאוד חשוב ב- HTML. בטבלה אתה צריך למקם רק את המידע הרגיל (טקסט, קישורים, רשימות, תמונות, וכו '), ולא את כל האתר.

כיצד ליצור טבלת HTML?

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

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

דוגמה לטבלה 2 עד 2.

<table width = "100%" border = "1">

<tr>

<td> הטקסט של התא הראשון של השורה הראשונה </ td>

<td> הטקסט של התא השני של השורה הראשונה </ td>

</ tr>

<tr>

<td> הטקסט של התא הראשון של השורה השנייה </ td>

<td> הטקסט של התא השני של השורה השנייה </ td>

</ tr>

</ table>

התגים <table> ו- </ table> מציינים את ההתחלה ואת הסוף של הטבלה. תגי <tr> ו- </ tr> הם ההתחלה והסוף של הקו. בשורה אחת יכולים להיות תאים רבים ככל האפשר, המוגדרים על ידי תגי <td> ו- </ td>.

הכלל העיקרי: מספר התאים בכל שורה צריך להיות זהה. זה שולחן.

html בטבלה

אבל, כמו עורך Word ו- Excel, תאים יכולים להיות משולבים אחד עם השני.

כיצד למזג תאים בטבלה?

כדי לשלב, להשתמש במאפיינים Colspan ו Rowspan. ספן מתרגם "לחבק" או "חפיפה". המשמעות המילולית היא לכסות / לכסות תאים / קווים.

כיצד למזג תאים בטבלה

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

html טבלאות

בדוגמה זו, בשורה הראשונה, 3תאים באמצעות התכונה colspan = "3". ואז התא הראשון של השורה השנייה נמתח לארבע שורות. זכור כי אנו למתוח / להתאחד רק בתא הראשון. רכושו יוארך עוד יותר. כל מה שקורה קודם לא יושפע.

אם יש לך 5 תאים ורוצים להתמזג בין 2 ל 4, אז אתה רק צריך לציין את colspan = "3" תכונה בתא מספר 2.

שימו לב למספר התא 9 באיור לעיל. שם הם מיד בשילוב תאים וקווים. פעולות כאלה אינן אסורות.

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

שילוב מחרוזות HTML

עיצוב טבלאות

קח את המקרה הרגיל, HTML רגיל. לשולחן יש שתי שורות של שני תאים כל אחד.

html טבלאות

התוצאה של הקוד יהיה כדלקמן.

טבלה ב- HTML

כפי שאתה יכול לראות, אין השפעות. ניתן להוסיף מסגרת, לציין את הרוחב והגובה.

תכונות שולחן HTML

ניתן גם לשחק עם היישור. ניתן ליישר גובה וגובה.

יישור טבלה

יישר ליישור אופקי, וישור עבור יישור אנכי. הנה התוצאה.

דוגמה ליצירת טבלאות ב- HTML

ניתן ליישם את תכונות היישור וההתאמה על המחרוזת כולה. אז כל התאים שנמצאים בו יצייתו למאפיינים האלה.

בנוסף לתגים <td> ו- <tr>, יש תג נוסף<th>. למעשה, זהו אנלוגי של <td>, אבל הוא משמש רק בשורה הראשונה ומשמש ככותרת. כברירת מחדל, הטקסט ב- <th> מרוכז ומודגש.

כיצד לחבר סגנונות לטבלה?

כמו כל תגי HTML, הטבלה יכולההשתנה באמצעות סגנונות. עליך לציין גליון סגנונות בראש הדף <link rel = "stylesheet" href = "style.css" type = "text / css"> או הסגנון המוגמר (גם בראש).

<head>

...

<style type = "text / css">

טבלה {

משפחת גופן: ורדנה, אריאל, הלויטקה, סאנס-סריף;

צבע: # 000000;

}

.my_class

{

צבע: # 666666;

}

</ style>

...

</ head>

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

<table class = "my_class">

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

<table class = "style_table" width = "100%" border = "1">

<tr class = "style_row1">

<td class = "style_td1"> הטקסט של התא הראשון של השורה הראשונה </ td>

<td class = "style_td2"> הטקסט של התא השני של השורה הראשונה </ td>

</ tr>

<tr class = "style_row2">

<td> הטקסט של התא הראשון של השורה השנייה </ td>

<td> הטקסט של התא השני של השורה השנייה </ td>

</ tr>

</ table>

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

תכונות נוספות לטבלאות

אילו תכונות ניתן לכתוב בשיעורי סגנון? יש כל כך הרבה תכונות החלות על טבלאות. חשוב על הבסיסיים ביותר שאתה צריך.

ישר

יישור אופקי

שווים

יישור אנכי

רקע

תמונת רקע בתא / טבלה

bgcolor

צבע רקע בתא

bordercolor

צבע גבול הטבלה / התא

גובה

גובה התא

nowrap

איסור העברת טקסט בשורה.

רוחב

רוחב התא / הטבלה

כפי שאתה יכול לראות, אתה יכול להשתמש ב- HTML בטבלה עם מספר עצום של "כלים".

דוגמאות לטבלאות HTML

יפה נוצר באמצעות טבלאות HTML. דוגמאות

הודות סגנונות, אתה יכול ליצור שולחנות יפים שונים. הכל תלוי במה שאתה אוהב ואיך.

דוגמאות טבלאות HTML
זה כמו בישול. החומרים זהים, אבל יש הרבה מתכונים.

כיצד ליצור טבלת HTML

כפי שאתה יכול לראות, אם אתה משתמש תגי HTML, את הטבלה ניתן להפוך ללא הכר. גבולות האפשרויות נקבעים על ידי הדמיון שלך.