TechCodeview

תג טבלת HTML משמש להצגת נתונים בצורת טבלה (שורה * עמודה). יכולות להיות עמודות רבות בשורה.

אנו יכולים ליצור טבלה להצגת נתונים בצורת טבלה, באמצעות

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

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

תגיות טבלת HTML

דוגמה לטבלת HTML

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

 <table class="table"> <tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr> <tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr> <tr><td>James</td><td>William</td><td>80</td></tr> <tr><td>Swati</td><td>Sironi</td><td>82</td></tr> <tr><td>Chetna</td><td>Singh</td><td>72</td></tr> </table> 

תְפוּקָה:

מה זה אומר xd

בטבלת ה-html לעיל, יש 5 שורות ו-3 עמודות = 5 * 3 = 15 ערכים.

טבלת HTML עם גבול

ישנן שתי דרכים לציין גבול עבור טבלאות HTML.

1. לפי תכונת גבול של טבלה ב-HTML
2. לפי נכס גבול ב-CSS

1) תכונת HTML Border

אתה יכול להשתמש בתכונת גבול של תג טבלה ב-HTML כדי לציין גבול. אבל זה לא מומלץ עכשיו.

 <table class="table"> <tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr> <tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr> <tr><td>James</td><td>William</td><td>80</td></tr> <tr><td>Swati</td><td>Sironi</td><td>82</td></tr> <tr><td>Chetna</td><td>Singh</td><td>72</td></tr> </table> 

תְפוּקָה:

2) נכס CSS Border

כעת מומלץ להשתמש בתכונת הגבול של CSS כדי לציין את הגבול בטבלה.

 table, th, td { border: 1px solid black; } 

אתה יכול לכווץ את כל הגבולות בגבול אחד על ידי מאפיין כווץ גבול. זה ימוטט את הגבול לאחד.

vb ו-vb נטו

 table, th, td { border: 2px solid black; border-collapse: collapse; } 

תְפוּקָה:

טבלת HTML עם ריפוד תאים

אתה יכול לציין ריפוד עבור כותרת טבלה ונתוני טבלה בשתי דרכים:

1. לפי תכונת ריפוד סלולרי של טבלה ב-HTML
2. על ידי ריפוד נכס ב-CSS

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

 table, th, td { border: 1px solid pink; border-collapse: collapse; } th, td { padding: 10px; } 

תְפוּקָה:

רוחב טבלת HTML:

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

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

 table{ width: 100%; } 

דוגמא:

 table table{ border-collapse: collapse; width: 100%; } th,td{ border: 2px solid green; padding: 15px; } <table class="table"> <tr> <th>1 header</th> <th>1 header</th> <th>1 header</th> </tr> <tr> <td>1data</td> <td>1data</td> <td>1data</td> </tr> <tr> <td>2 data</td> <td>2 data</td> <td>2 data</td> </tr> <tr> <td>3 data</td> <td>3 data</td> <td>3 data</td> </tr> </table> 

תְפוּקָה:

טבלת HTML עם colspan

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

זה יחלק תא/שורה אחד למספר עמודות, ומספר העמודות תלוי בערך של תכונת colspan.

בואו נראה את הדוגמה המשתרעת על פני שתי עמודות.

קוד CSS:

 table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 5px; } 

קוד HTML:

 <table class="table"> <tr> <th>Name</th> <th>Mobile No.</th> </tr> <tr> <td>Ajeet Maurya</td> <td>7503520801</td> <td>9555879135</td> </tr> </table> 

תְפוּקָה:

טבלת HTML עם טווח שורות

אם ברצונך להפוך טווח תאים ליותר משורה אחת, תוכל להשתמש בתכונת rowspan.

מתמטיקה.ג'אווה אקראית

זה יחלק תא למספר שורות. מספר השורות המחולקות יהיה תלוי בערכי תוחלת השורות.

בואו נראה את הדוגמה המשתרעת על פני שתי שורות.

קוד CSS:

 table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 10px; } 

קוד HTML:

 <table class="table"> <tr><th>Name</th><td>Ajeet Maurya</td></tr> <tr><th>Mobile No.</th><td>7503520801</td></tr> <tr><td>9555879135</td></tr> </table> 

תְפוּקָה:

טבלת HTML עם כיתוב

כיתוב HTML מוצג מעל הטבלה. יש להשתמש בו לאחר תג הטבלה בלבד.

 <table class="table"> Student Records <tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr> <tr><td>Vimal</td><td>Jaiswal</td><td>70</td></tr> <tr><td>Mike</td><td>Warn</td><td>60</td></tr> <tr><td>Shane</td><td>Warn</td><td>42</td></tr> <tr><td>Jai</td><td>Malhotra</td><td>62</td></tr> </table> 

עיצוב טבלת HTML זוגי ואי-זוגי

קוד CSS:

 table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 10px; } table#alter tr:nth-child(even) { background-color: #eee; } table#alter tr:nth-child(odd) { background-color: #fff; } table#alter th { color: white; background-color: gray; } 

תְפוּקָה:

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

דפדפנים תומכים

אֵלֵמֶנט	כרום	כְּלוֹמַר	פיירפוקס	אוֹפֵּרָה	ספארי
	כן	כן	כן	כן	כן