דף הבית » עיצוב אתרים » 35 כלים, סקריפטים ותוספים לבנות טבלאות HTML יפה

    35 כלים, סקריפטים ותוספים לבנות טבלאות HTML יפה

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

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

    טבלה jQuery קטעי

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

    טבלאות

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

    לא עוד שולחנות

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

    גוף שולחן גלילה

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

    כותרת טבלה קבועה

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

    טהור CSS טבלה להדגיש

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

    TABLEIZER!

    TABLEIZER! הוא כלי מקוון המאפשר לך ליצור טבלאות פשוטות ב- HTML באמצעות נתונים מ- Excel, Google Sheets, או כל כלי גיליון אלקטרוני אחר. ניתן גם להתאים אישית את הטבלה הסופית באמצעות CSS, בדיוק כמו כל טבלה אחרת ב- HTML.

    HTML טבלה גנרטור

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

    Quackit HTML טבלה גנרטור

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

    טבלאות מהירות

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

    HTML טבלה Styler

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

    כלי ההמרה

    כלי ההמרה הם אתר שימושי עבור כל מי שמתמודד עם טבלאות וגיליונות אלקטרוניים על בסיס יומי. הוא מסייע לך להמיר טבלת HTML לקובץ CSV, קובץ Excel לטבלת HTML, קובץ Excel לקובץ CSV ועריכת המרות רבות יותר.

    טבלת HTML ממיר Div

    כלי ממיר מקוון, HTML טבלה ממיר Div מאפשר לך להמיר שולחנות מסורתיים טבלאות div, כלומר טבלאות שנוצרו באמצעות אלמנטים "div". כל מה שאתה צריך לעשות הוא להעתיק ולהדביק טבלה על הדף שלה ולחץ על כפתור להמיר כדי ליצור טבלה div.

    Handsontable

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

    Dynatable.js

    תוסף טבלה אינטראקטיבית, Dynatable.js משתמש ב- HTML, jQuery ו- JSON כדי ליצור טבלאות ומבנים אחרים דמויי שולחן. אתה יכול ליצור טבלאות ישירות JSON ולשלב את כל הפונקציות החיוניות כמו חיפוש, מסנן, ספירת שיא, ו pagination.

    טבלה

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

    רשימה

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

    jExcel

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

    טבלאות נתונים

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

    jQuery Bootgrid

    jQuery Bootgrid הוא תוסף מלוטש ואינטואיטיבי ליצור ולנהל רשתות כמו טבלאות. הוא מספק תכונות כמו חיפוש, pagination, וכו 'יחד עם תבניות להתאמה אישית.

    jQuery-Tabledit

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

    jsGrid

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

    טבלה חכמה

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

    HighchartTable

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

    טבלה

    TableExport היא ספריה פשוטה לייצא טבלת HTML לקובצי CSV, TXT או Excel. באמצעות ספריה זו, ניתן לבנות טבלאות בקלות עם התכונה 'ייצוא לקובץ'.

    טבולטור

    Tabulator הוא תוסף jQuery עבור יצירת טבלאות אינטראקטיביות מ טבלת HTML, מערך JavaScript, JSON, וכו 'הוא תומך כמעט בכל פונקציות שולחן רגיל כמו חיפוש, מיון, מסנן וכו' ומציע תכונות רבות כגון נושאים, callbacks, ולוקליזציה.

    פנסיגרי

    ספריית רשת, FancyGrid מאפשר לך ליצור שולחנות יפה יחד עם תרשימים וגרפים. הוא תומך הרבה מקורות נתונים כולל JSON, כולל פונקציות שונות כמו מיון, חיפוש, וכו ', מאפשר theming ו modularization, ומביא תכונות רבות יותר.

    קינגטייבל

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

    stacktable.js

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

    Tabella.js

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

    לוח

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

    טבלאות נתונים גנרטור על ידי Supsystic

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

    טבלת תמחור על ידי Supsystic

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

    טבלה מגיבה

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

    העתקים

    Copytables הוא תוסף עבור Google Chrome המאפשר העתקת טבלאות מדפי אינטרנט. אתה יכול בחר בתאי טבלה, שורות או עמודות בכל דף אינטרנט, והעתק אותם ישירות .