כיצד ליצור טבלת HTML. טבלת צבעים

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

תחילת העבודה על השולחן

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

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

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

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

העורך

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

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

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

תגים

לא משנה איזה עורך אתהאתה תשתמש, לפני שתתחיל ליצור את הטבלה html, אתה צריך לזכור את התגים העיקריים. יש שלושה מהם - <table>, <tr> ו- <td>. שים לב שכל התגים משויכים. התג הראשון מציין את הטבלה כולה, השנייה מציינת את המחרוזת, השלישית מציינת את התא בתוך המחרוזת.

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

כך, הקוד של הטבלה 2x2 ייראה כך:

<table>

<tr> <td>

</ td> <td> </ td> </ tr>

<tr> <td> </ td> <td> </ td> </ tr>

</ table>

ניתן להוסיף טבלה לתוך HTML של הדף על ידי העתקת אותו מהעורך הנבחר.

פרמטרים של טבלאות, שורות ותאים

אז פירקנו את הקוד הבסיסי. עכשיו בואו נדבר על איך לשפר את השולחן, לעשות את זה בהיר יותר אטרקטיבי. כדי לעשות זאת, אתה צריך לדעת את הפרמטרים הבסיסיים של התגים. הם כתובים בתוך תג הפתיחה, עם סימן שווה אחרי כל פרמטר, ואז הערך שלו, מצוטט, כתוב. לדוגמה, הרקע בטבלת HTML מוגדר כ: <table bgcolor = "#FFFFFF">.

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

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

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

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

תוכל להשתמש בתג <caption> המשויך, שהוקצה מיד לאחר התג <table> הפותח.

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

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

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

זה כל האפשרויות הכי שימושי.

טבלת צבעים

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

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

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

תוכן

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

כדי לשים טקסט או כל מידע אחר בתא (שורה), יש צורך לרשום אותו בין שתי תגיות. לדוגמה: <td> שם </ td>. התא מציג "שם".

ניתן למקם מידע גרפי וקובצי מדיה עם תגים מיוחדים - <img>, <audio> ו- <video>.

טיפים

לבסוף לתת כמה טיפים שימושיים שיעזרו לך ליצור במהירות טבלת HTML של המורכבות בכל.

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

התוכן של תאים ומיתרים מומלץ לכתוב כבר בסוף ממש, כאשר מסגרת השולחן מוכן.