בניית כלים עבור Toolz.dev פירושו שאני כותב הרבה טבלאות HTML, בתיעוד, במיילים למשתמשים, בדף נחיתה רגיל מדי פעם. וטבלה היא החלק האחד של HTML שאף אחד לא נהנה לכתוב ביד. עשר שורות וחמש עמודות הן למעלה מחמישים תגי תאים, שכולם צריכים להיפתח ולסגור בסדר הנכון, ואחד חסר </td> שובר בשקט את כל הפריסה הייתה לי ערימת נתונים בגיליון אלקטרוני ורציתי את הסימון, אז בניתי גנרטור לתוך האתר זה המדריך לזה.
TL;DR: הכליז מחולל טבלאות HTML לוקח נתונים מופרדים בפסיקים או כרטיסיות וכותב נתונים מלאים ונגישים
<table>עם<thead>,<tbody>, ותאי כותרת מתאימים השורה הראשונה יכולה להפוך<th scope="col">והעמודה הראשונה<th scope="row">, אז קוראי מסך מכריזים על הכותרות הנכונות הוסף כיתוב, שורות פסים וגבולות, ובחר CSS מבוסס-מחלקה, סגנונות מוטבעים עבור דואר אלקטרוני או HTML סמנטי רגיל כל תא נמלט הוא פועל לחלוטין בצד הלקוח: אין העלאה, אין הרשמה, עובד במצב לא מקוון.
מהו מחולל טבלאות HTML?
מחולל טבלאות HTML הופך שורות של נתונים לסימון HTML שמציג אותם כטבלה בדפדפן אתה מדביק ערכים מופרדים בפסיקים או מופרדים בטאבים, בוחר איך הטבלה צריכה להיראות והכלי כותב שלם <table> אלמנט עם <thead>, <tbody>, והשורות והתאים שבתוכם. במקום להקליד ביד כל <tr>, <th>, ו <td> וספירת תאים כדי לשמור על העמודות מסודרות, אתה מדביק את הנתונים פעם אחת ומעתיק סימון גיבוי שמוכן לצנוח לדף, תבנית דואל או קובץ Markdown המאפשר HTML גולמי.
הסיבה שמחולל מרוויח את מקומו היא ש-HTML של טבלה הוא מילולי וחוזר על עצמו, והחזרה היא המקום שבו מסתתרות טעויות כל תא צריך תג פתיחה וסגירה, תאי כותרת שונים מתאי נתונים, וכל העניין צריך להישאר מלבני או הדפדפן עושה בלגן מרופט לעשות את זה ביד לכל דבר מעבר לטבלה זעירה זה איטי ונוטה לשגיאות הכלי עושה את זה באופן דטרמיניסטי: אתה נותן לו את הערכים, הוא מייצר סימון תקף, נמלט, מקונן נכון.
יש שכבת נגישות על גבי הסימון הגולמי ששולחן בכתב יד מדלג עליו לעיתים קרובות, וזה החלק שהכי אכפת לי ממנו שולחן בנוי כהלכה משתמש בו <th> עבור תאי כותרת עם א scope תכונה כך שטכנולוגיה מסייעת יכולה להכריז לאיזו כותרת שייך תא נתונים נתון, והיא יכולה לשאת א <caption> תיאור מה מכילה הטבלה.WHATWG HTML Living Standard's סעיף על נתונים טבלאיים מפרט את האלמנטים הללו, והמחולל מיישם אותם עבורך במקום להשאיר לך א <div> רשת שנראית כמו טבלה אבל נקראת כרעש לקורא מסך.
למה לא פשוט לכתוב את השולחן ביד?
עבור שולחן שניים על שניים, כתיבת יד זה מהיר יותר מפתיחת כלי, ואתה צריך. המחולל מרוויח את השמירה שלו על הטבלאות שהן למעשה כואבות: אלה עם נתונים אמיתיים, שורות רבות וכותרת. באלה, לכתיבת יד יש שלושה מצבי כשל חוזרים.
הראשון הוא מבנה שבור מיס תג סגירה אחד בין חמישים והדפדפן ' שחזור שגיאות s עושה משהו בלתי צפוי, ואתה מאבד דקות בחיפוש אחר התא שהתחיל אותו השני הוא עמודות לא עקביות אם בשורה אחת יש ארבעה תאים ובשאר יש חמישה, הטבלה הופכת עקומה, והזיהוי של השורה הקצרה בקיר של תגים הוא באמת קשה השלישית היא בריחה: הדבק נתונים המכילים א <, א &, או תועה " ישר לתוך תא או שברת את הסימון או פתחת חור הזרקה קטן.
המחולל מסיר את שלושתם הוא מרפדת שורות קצרות כך שלכל שורה יש אותו מספר תאים והטבלה נשארת מלבנית היא תמיד סוגרת את מה שהיא פותחת והיא HTML-בורחת מכל ערך תא, אז א < הופך < ומציג כטקסט במקום להיקרא כתג מה שאתה מדביק זה מה שאתה מקבל, מעובד בבטחה.
הנה ההחלטה בטבלה אחת.
| מצב | להשתמש | למה |
|---|---|---|
| שולחן זעיר של שניים על שניים | כתוב ביד | מהר יותר מלפתוח כל דבר |
| נתונים אמיתיים עם שורות רבות וכותרת | מחולל טבלאות HTML | בריחה, קינון ויישור הם המקום שבו שולחנות ידיים נשברים |
| אתה רוצה שולחן Markdown במקום | מחולל שולחנות Markdown | אותו רעיון, פלט Markdown בטעם GitHub |
| אתה רק רוצה להציג או לבדוק CSV | מציג CSV | קרא את הנתונים מבלי ליצור סימון |
איך אני מנגיש את השולחן?
זו השאלה שמפרידה בין טבלה שרק נראית נכונה לטבלה שעובדת עבור כולם, אז היא מקבלת קטע משלה. שני דברים חשובים: תאי כותרת וכיתוב.
תאי כותרת תחילה. בטבלה אמיתית, התאים שמתייגים שורות או עמודות צריכים להיות <th>, לא <td>, וכל אחד <th> צריך לשאת א scope תכונה האומרת אם הוא עומד בראש עמודה (scope="col") או שורה (scope="row"). קוראי מסך משתמשים scope כדי להכריז על הכותרת הרלוונטית לפני כל תא נתונים, כך שמאזין שומע את "Role: Engineer" במקום "Engineer" ללא הקשר. האפשרות generator's שורה ראשונה פולטת <th scope="col"> עבור השורה העליונה, והאפשרות של כותרת העמודה הראשונה פולטת <th scope="row"> לתא המוביל של כל שורת גוף.W3C's WAI tutorial on tables recommends exactly this pattern for simple data tables.
הכיתוב הוא היצירה השנייה. א <caption> אלמנט, שיושב ישירות בתוך הטבלה, נותן לטבלה כותרת שהטכנולוגיה המסייעת קוראת ושמשתמשים רואים רואים מעל הרשת. זה המקבילה הנגישה למשפט שהיית כותב מעל הטבלה בכל מקרה. המחולל מוסיף אחד כשאתה ממלא את שדה הכיתוב, והוא בורח ממנו כמו כל טקסט אחר. בין כיתוב לכותרות בהיקף, הפלט הוא טבלה שקורא מסך יכול לנווט בה ולא צורה שהיא נקלעת אליה.
מה ההבדל בין מצבי הסטיילינג?
הכלי מציע שלוש דרכים לספק את העיצוב, כי לאן השולחן הולך משנה את מה שעובד.
מצב כיתה מוסיף שמות מחלקות לטבלה ומוציא בלוק תואם של CSS שאתה יכול להכניס לגיליון הסגנונות שלך. זו הבחירה הנכונה עבור אתר אינטרנט: הסימון נשאר נקי, הסטיילינג חי במקום אחד ותכונות כמו שימוש בפסי זברה tbody tr:nth-child(even), שעובד רק מגיליון סגנונות. במקום זאת, מצב מוטבע כותב את הסגנונות ישירות על כל אלמנט עם style תכונות. זה סימון מכוער יותר, אבל זה מה שאתה צריך עבור דואל HTML, שבו רוב הלקוחות מתפשטים <style> בלוקים ו-CSS חיצוני, כך שהסטיילינג צריך לרכוב על כל אלמנט. מצב None מוציא HTML סמנטי רגיל ללא מחלקות וללא סגנונות כלל, וזה מה שאתה רוצה כשיש לך מערכת עיצוב משלך ורק צריך מבנה נכון ונגיש לתלות אותו.
אני מגיע למצב כיתה כברירת מחדל, מצב מוטבע רק כשאני מדביק למייל, ולא מצב כשאני מוריד את הטבלה לאתר שכבר מעצב את הטבלאות שלו באופן גלובלי. הכלי מאפשר לך לעבור ביניהם מבלי להזין מחדש את הנתונים שלך, אז לנסות את שלושתם לראות מה מתאים זה כמה קליקים.
איך אני משתמש בגנרטור?
הזרימה היא ארבעה שלבים הדבק שורות מופרדות בפסיקים או מופרדות בכרטיסיות בתיבת הקלט; המפריד מזוהה באופן אוטומטי, ותוכל לעקוף אותו אם הנתונים שלך מעורפלים. החלט אם השורה הראשונה היא כותרת עמודה והאם העמודה הראשונה של כל שורה היא כותרת שורה. הוסף כיתוב, הפעל שורות פסים, גבולות או פריסה קומפקטית, ובחר CSS מבוסס מחלקה, סגנונות מוטבעים או HTML רגיל. לאחר מכן לחץ על צור והעתק את ה-HTML, בתוספת ה-CSS התואם במצב מחלקה.
הניתוח עוקב אחר RFC 4180, התקן הבלתי פורמלי עבור CSV, כך ששדה עטוף במירכאות כפולות יכול להכיל את המפריד וציטוט כפול בתוך שדה מצוטט הופך לציטוט בודד. זה אומר תא כמו "Doe, Jane" נשאר תא אחד במקום להתפצל בפסיק. ומכיוון שהכל פועל בדפדפן שלך, אתה יכול להדביק נתונים הכוללים שמות לקוחות, נתונים פנימיים או כל דבר אחר שלא תרצה בשרת, והוא אף פעם לא עוזב את המחשב שלך. המודל הזה בצד הלקוח הוא אותו דגם מאחורי שאר האתר, המתואר ב- כלים מקוונים לפרטיות נתונים מדריך.
איך זה מסתדר עם הכלים האחרים?
מחולל טבלת ה-HTML יושב בקבוצה קטנה של כלים שכולם לוקחים נתונים מובנים ומחזירים סימון ניקוי. השכן הקרוב ביותר שלו הוא מחולל שולחנות Markdown, שעושה את אותה עבודה אבל מוציא Markdown בטעם GitHub עבור READMEs ובעיות במקום HTML עבור דפי אינטרנט. כאשר הטבלה שנוצרה 's סימון רוצה לסדר, או שיש לך ערימה של HTML טבלה בכתב יד כדי להזין מחדש את פורמט HTML מייפה אותו. וכשאתה עובר בין מסמכי HTML ו-Markdown, ה HTML לממיר Markdown מטפל בנסיעה הלוך ושוב, כולל שולחנות.
הרעיון המחבר הוא שהנתונים חיים בצורה אחת ואתה צריך אותם בצורה אחרת, וכלי דטרמיניסטי עושה את התרגום טוב יותר מאדם שעורך תגים ביד. אם אתה בונה עבור האינטרנט, ה ערכת כלים למפתחי אינטרנט roundup מראה כיצד אלה משתלבים זה בזה, וה כלי פרודוקטיביות למפתחים המדריך מכסה את הסט הרחב יותר של כלי עזר קטנים שחוסכים כמה דקות כל אחד, פעמים רבות ביום.
דוגמה מעובדת מכתיבת תיעוד
תן לי להפוך את זה לקונקרטי הרבה מהתיעוד סביב האתר הוא קבוצה של השוואות תכונות וטבלאות התייחסות: איזה כלי עושה מה, אילו מגבלות חלות איפה, מה המשמעות של אפשרות נתונה רוב הנתונים האלה מתחילים את החיים בגיליון אלקטרוני, כי גיליון אלקטרוני הוא המקום שבו קל לערוך ולמיין אותו הכנסתו לדף שמשמעותה ייצוא ל-Markdown, שחלק מהדפים שלי אינם מציגים, או הקלדה ידנית של טבלת ה-HTML, שלצורך הפניה בת עשרים שורות היא עשר דקות אומללות באמת.
עכשיו אני מעתיק את העמודות ישר מהגיליון האלקטרוני, שמציב ערכים מופרדים בטאבים בלוח, מדביק אותם במחולל ונותן לו לזהות אוטומטית את מפריד הכרטיסיות. אני שומר את השורה הראשונה ככותרת, מוסיף כיתוב המתאר את הטבלה, מפעיל שורות וגבולות מפוספסים במצב כיתה, ומעתיק גם את ה-HTML וגם את ה-CSS. הסימון נופל לדף, ה-CSS נכנס לגיליון הסגנונות פעם אחת ונעשה בו שימוש חוזר על ידי כל טבלה לאחר מכן, וכל העניין לוקח פחות מדקה. תאי הכותרת יוצאים בתור <th scope="col">, אז הטבלה נגישה בלי שאני חושב עליה, וכל ערך נמלט, אז השורה שמכילה א < בהפניה לקוד לא מפוצץ את הדף.
הסיבה שאני משתמש במחולל ולא בכתיבת יד של הטבלאות האלה היא לא שה-HTML קשה, זה שה-HTML משעמם והחלקים המשעממים הם המקום שבו אני מציג באגים. הורדת הקלדת התג, הבריחה ותכונות הנגישות לכלי פירושה שהטבלה נכונה בהדבקה הראשונה, ואני מבלה את תשומת ליבי בתוכן הטבלה במקום בצנרת שלה. למייל, אני מחדש את אותם נתונים במצב מוטבע, כי כלי הניוזלטר מתפשט <style> בלוקים, והגרסה המוטבעת שורדת את הטיול בשלמותה.
מהם הגבולות שכדאי לדעת עליהם?
כמה קצוות כנים הראשון הוא שהכלי הזה בונה נתונים טבלאות, מהסוג עם כותרות ושורות ערכים זה לא כלי פריסה, והוא לא עושה colspan או rowspan, הטריקים של תאים ממוזגים שאתה רואה לפעמים בטבלאות מורכבות תאים ממוזגים מקשים בהרבה על קוראי מסך לנווט בכל מקרה, ועבור הרוב המכריע של הנתונים הטבלאיים אינך זקוק להם אם אתה באמת צריך כותרת ממוזגת המשתרעת על פני מספר עמודות, כלומר עריכה ידנית לסימון שנוצר, וה פורמט HTML ישמור על זה מסודר לאחר מכן.
השני הוא שהמחולל קורא את הנתונים שלך כטקסט ולא מנסה להתחכם לגבי טיפוסים עמודה של מספרים נפלטת כטקסט בכל תא, וזה בדיוק מתאים לתצוגה; הוא אינו מיישר נכון מספרים או מוסיף אלפי מפרידים, כי אלו החלטות עיצוב ועיצוב ששייכות לך. מה שזה מבטיח זה שהערך שהדבקת הוא הערך בתא, נמלט וללא שינוי.
השלישי הוא אי בהירות מפריד זיהוי אוטומטי עובד על ידי מציאת המפריד שנותן את ספירת העמודות העקבית ביותר על פני השורות שלך, והוא אמין עבור CSV ו-TSV נקיים. אם הנתונים שלך מעורפלים באמת, למשל ערכים המכילים פסיקים לא מצוטטים בשורות מסוימות, זיהוי יכול לנחש שגוי, וזו הסיבה שהמפריד הוא עקיפה ידנית ולא החלטה קבועה. הגדר זאת במפורש והניתוח הוא דטרמיניסטי.
לבסוף, ה-CSS שנוצר במצב מחלקה הוא נקודת התחלה הגיונית וניטרלית: רקע כותרת בהיר, גבולות דקים, ריפוד נוח. זה נועד לערוך. שנה את הצבעים כך שיתאימו למותג שלך, כוונן את הריפוד, שחרר את הפסים; זה CSS רגיל עם שמות מחלקות ברורים, והכלי ' התפקיד הוא לשמור לך את הטיוטה הראשונה, לא להכתיב את המראה הסופי.
שאלות נפוצות
מהו מחולל טבלאות HTML? מחולל טבלאות HTML ממיר שורות של נתונים לסימון HTML שמציג אותם כטבלה. אתה מדביק CSV או ערכים מופרדים בטאבים והוא כותב שלם אלמנט עם , , ותאים, כך שאינך צריך להקליד כל תג ביד.
כיצד אוכל להמיר CSV לטבלת HTML? הדבק את ה-CSV שלך בתיבת הקלט, שמור את השורה הראשונה ככותרת אם היא מכילה שמות עמודות, בחר את העיצוב שלך ולאחר מכן לחץ על צור הכלי מזהה את המפריד, בונה את הטבלה ונותן לך HTML שתוכל להעתיק ישירות לדף.
איך אני מנגיש את השולחן? השתמש בתאי כותרת וכיתוב. הפעל את הכותרת בשורה הראשונה כדי שכותרות העמודות יהפכו , הפעל את כותרת העמודה הראשונה עבור תוויות שורות, והוסף כיתוב המתאר את הטבלה. לאחר מכן קוראי מסך מכריזים על הכותרת הנכונה עבור כל תא.מה ההבדל בין מצבי הסטיילינג? מצב מחלקה מוסיף שמות מחלקות ובלוק CSS נפרד, המתאים ביותר לאתר אינטרנט. מצב מוטבע כותב סגנונות ישירות על כל אלמנט, מה ששורד את ההדבקה בדואל. מצב אף אחד לא מוציא HTML סמנטי רגיל כך שתוכל להחיל גיליון סגנונות משלך.
האם תווים מיוחדים בנתונים שלי נמלטים? כן. כל ערך תא נמלט מ-HTML, אז תווים כמו <, >, & ו-" נכתבים כישויות ומוצגים כטקסט במקום להתפרש כסימון. זה מונע מהטבלה להישבר כאשר הנתונים מכילים סוגריים זווית או אמפרסנדים.
האם זה יכול להתמודד עם פסיקים בתוך תא? כן המנתח עוקב אחר RFC 4180, כך ששדה עטוף במירכאות כפולות יכול להכיל את המפריד, וציטוט כפול בתוך שדה מצוטט הופך לציטוט בודד. פסיקים מצוטטים נשארים חלק מהתא במקום להתחיל עמודה חדשה.
האם הנתונים שלי מועלים במקום כלשהו? מס 'ההמרה מתרחשת כולה בדפדפן שלך באמצעות JavaScript במכשיר שלך הנתונים שלך לעולם לא מועלים, מתועדים או מאוחסנים, והכלי ממשיך לעבוד עם הרשת מנותקת לאחר שהדף נטען.
האם מחולל טבלת HTML בחינם? כן. זה לגמרי בחינם ללא הרשמה, ללא סימן מים וללא מכסה שימוש. צור טבלאות HTML רבות ככל שאתה צריך עבור פרויקטים אישיים או מסחריים.
