表の幅はどう決まる

表の幅決定の仕組みを解説します。

Transcript

1. දͷ෯͸Ͳ͏ܾ·Δ
   IUNMK8FCϓϥοτϑΥʔϜ෦ୈճษڧձ
   
   

   View Slide

2. ࣗݾ঺հ
   w גࣜձࣾϐΫηϧάϦου
   w ݱࡏ͸6*σβΠφʔΛ໊৐͍ͬͯΔ
   w ࢴഔମͷ޿ࠂσβΠϯΛ೥͙Β͍΍ͬͯ·ͨ͠
   w 8FCؔ࿈ͷܦݧ͸೥͙Β͍
   w ϐΫηϧάϦουͰ͸ओʹ6*ઃܭͱը໘σβΠϯ
   w ࢴͷ࣌୅͔Β࡞ۀʹ͸"EPCF*MMVTUSBUPSΛ࢖ͬͯ·͢
   ͓͹Β͔ͭ͞
   !TBVDFSKQ
   

   View Slide

3. ॻ੶
   w ϊϯσβΠφʔζɾσβΠϯϒοΫ<ୈ൛>

   ೔ຊޠσβΠϯαϯϓϧղઆ
   w վగ൛8FCσβΠφʔͷͨΊͷK2VFSZೖ໳
   σβΠϯαϯϓϧղઆ
   

   View Slide

4. 8FCΞϓϦ࡞ͬͨΓ΋ͯ͠·͢
   w)6&

   K2VFSZ
   
   w-JWF.E

   7VFKT$ISPNF&YUFOTJPO
   
   wࣾ಺༻ͷ8FCΞϓϦ

   7VFKT'JSFCBTF
   
   wࣾ಺༻ͷ4MBDLίϚϯυ

   4MBDL$MPVE'VODUJPOT'JSFCBTF
   
   

   View Slide

5. ࠓ೔ͷ಺༰
   σβΠφʔ͞ΜΛର৅ʹͯ͠ɺ
   දͷ෯ܾఆͷ࢓૊ΈΛऔΓ্͛·͢
   

   View Slide

6. ͍͖ͳΓ࿬ಓͳͷͰ͕͢ʜ
   

   View Slide

7. ##ͷϨεϙϯγϒࣄ৘
   

   View Slide

8. w #$͸ϞόΠϧϑΝʔετ͕ͩʜ
   w اۀͰͷར༻͸ϊʔτ1$΍σεΫτοϓ1$͕ओྲྀ
   w ϞόΠϧ୺຤ͷΈͰۀ຿Λ׬݁ͤ͞Δͷ͸೉͍͠
   w σεΫτοϓϑΝʔετ
   ϝΠϯ୺຤
   

   View Slide

9. ը໘ଆʹ͸ͲΜͳཁٻ͕͋Δ͔
   

   View Slide

10. ϨεϙϯγϒରԠ΁ͷӨڹ
    ୔ࢁͷਓ͕ͻͱͭͷ࢖͍ํͱ͍͏ΑΓ΋ɺͻͱΓͷਓ͕୔ࢁͷ࢖͍ํͱͳΔ
    

    View Slide

11. w ࢖༻ײʹมԽ͕Ͱʹ͍͘΋ͷʹ
    w XJOEPXαΠζ
    w ཁૉྔ
    w ݖݶ
    w ୺຤͝ͱͷֶशίετΛݮΒ͍ͨ͠
    ϨεϙϯγϒରԠ΁ͷӨڹ
    ୺຤͝ͱ΁ͷϑΟοτײΑΓֶशࡁΈ࢖͍উखͷ࠶ར༻
    

    View Slide

12. ϨεϙϯγϒରԠ΁ͷӨڹ
    ྫ͑͹มԽͷܹ͍͠ϨΠΞ΢τΛආ͚Δͱ͔
    

    View Slide

13. ͳͷͰɺ࠾༻͠ʹ͍͘ػೳ͕͋Δ
    

    View Slide

14. ߦͱྻ͕૊ΈมΘΔද૊Έ
    

    View Slide

15. w ҰཡੑΛ٘ਜ਼ʹ͠΍͍͢
    w ߦྻೖΕସΘΔͱ࠶ֶश͕ඞཁʹͳΔ
    w पลཁૉͷҐஔ͕มԽͯ͠͠·͏
    w େ఍ɺ࣮૷͕େมʹͳΔ
    w େ఍ɺอक͕େมʹͳΔ
    w όάΛੜΈ͕ͪ
    w ޙ͔Βͷํ਑มߋ͕೉͍͠
    w DPMTQBO SPXTQBO͋ΔͱͭΒ͍
    ߦͱྻ͕૊ΈมΘΔද૊Έ
    

    View Slide

16. ͦΕΑΓ΋දͷڍಈΛ೺Ѳ͍ͨ͠
    

    View Slide

17. w ҙ֎ͱࢥ͍௨ΓʹͳΒͳ͍͜ͱ͕ଟ͍
    w ͳΜͱͳ͘ʮͰ͖ΔͩΖ͏ʯͰσβΠϯ͕ͪ͠
    w ಺༰͕ՄมʹͳΔͱ࠷ऴతͳ༧ଌ͕͠ʹ͍͘
    w ςʔϒϧɺΘΓͱ࢖͏
    ஌͍ͬͯΔΑ͏Ͱ஌Βͳ͍
    

    View Slide

18. ͋Γ͕ͪͳ͜ͱʜ
    

    View Slide

19. w ͬ͘͟Γ஌Δ͚ͩͰ΋ҧ͏
    w σβΠφʔ͕ཧղ͢Δ͜ͱͰϝϦοτ͕
    w ݁Ռ͕༧૝Ͱ͖ΔͷͰσβΠϯͷ෯͕޿͕Δ
    w ࣮૷ऀͱͷձ࿩͕εϜʔζʹ
    w ૝ఆ֎ͷࣄଶͱ͍͏ͷΛݮΒͤΔ
    w ΑΓྑ͍΋ͷ͕Ϣʔβʔʹಧ͖΍͘͢ͳΔ
    ςʔϒϧͱ஥ྑ͘ͳΖ͏
    σβΠφʔ͕Ұา౿ΈࠐΜͰΈΔ
    

    View Slide

20. ෯ܾఆͷ࢓૊Έ
    

    View Slide

21. w ෯ܾఆͷܭࢉํ๏ʹ͸ݻఆͷ࢓༷͸͋Γ·ͤΜ
    w )5.-࢓༷ʹ͸ਪ঑͞ΕΔͻͱͭͷྫ͕ࡌ͍ͬͯΔ
    w ϒϥ΢βϕϯμʔଆͷࡋྔͰΞϧΰϦζϜΛ࠾༻Ͱ͖Δ
    w ͨͩɺ࣮ࡍͷ݁ՌΛൺ΂Δͱ΄΅͓ͳ͡ܭࢉ݁ՌͱͳΔ
    w ࠓճ͸ɺͦͷਪ঑ྫͰղઆ
    લఏ
    

    View Slide

22. w ද૊Έʹ͸ͭͷϞʔυ͕͋Δ
    w UBCMFMBZPVUͷBVUPͱpYFE
    w ಛผͳࢦఆΛ͠ͳ͚Ε͹BVUPͱͳΔ
    w pYFE͸ࢦఆΛ͠ͳ͍ͱ༗ޮʹͳΒͳ͍
    BVUPͱpYFE
    ·ͣ͸େ͖ͳ෼͔Ε໨
    

    View Slide

23. BVUPͱpYFE
    େ͖͘ҧ͏෦෼
    

    View Slide

24. table-layout: fixed;
    

    View Slide

25. w ؆୯
    w ηϧ͸ͻͨ͢Βۉ౳ʹׂΔ
    w ηϧʹXJEUIࢦఆ͕͋Ε͹ɺͦΕʹै͍ɺ࢒Γ͸ۉ౳ʹ
    w ηϧ෯͕ڱ·ͬͨ࣌ͷ಺༰͸ՄೳͳݶΓંΓฦ͢
    w ંΓฦ͠Ͱ͖ͳ͘ͳͬͨΒςΩετ͕ηϧΛಥ͖ൈ͚Δ
    w αϯϓϧ
    pYFEͷ৔߹
    

    View Slide

26. table-layout: auto;
    

    View Slide

27. w ΍΍͍͜͠
    w ηϧ෯͕ڱ·ͬͨ࣌ͷ಺༰͸ՄೳͳݶΓંΓฦ͢
    w ંΓฦ͠Ͱ͖ͳ͘ͳͬͨΒද͕ྖҬΛಥ͖ൈ͚Δ
    w ෯͸ܭࢉʹΑׂͬͯΓৼΒΕΔ
    w αϯϓϧ
    BVUPͷ৔߹
    

    View Slide

28. Ͱɺྻͷ෯ܭࢉ
    

    View Slide

29. w ·ͣશͯͷηϧʹ͓͍ͯ࠷খ෯ͱ࠷େ෯Λࢉग़͢Δ
    w ද͕࠷খαΠζͰೖΒͳ͚Ε͹ಥ͖ൈ͚Δ
    w ද͕࠷େαΠζͰೖΔͳΒͦΕͰೖΕΔ
    w ંΓฦͯ͠ೖΔͳΒఔΑ͍෯ΛׂΓৼͬͯೖΕΔ
    w ྖҬͷ༨Γʢ8ʣྖҬͷ෯දͷ࠷খ෯
    w දͷมԽྔʢ%ʣදͷ࠷େ෯දͷ࠷খ෯
    w ֤ྻͷมԽྔʢEʣྻͷ࠷େ෯ྻͷ࠷খ෯
    w ֤ྻʹ8ʸ%ʷEͨ͠஋ΛׂΓ౰ͯΔ
    େ·͔ͳྲྀΕ
    

    View Slide

30. ͳΔ΄ͲɺΘ͔ΒΜɻ
    

    View Slide

31. ࠷খ෯ͱ࠷େ෯ͷαϯϓϧ
    

    View Slide

32. 8ʸ%ʷE
    

    View Slide

33. View Slide

34. View Slide

35. View Slide

36. View Slide

37. View Slide

38. View Slide

39. View Slide

40. w ྖҬͷ෯ͷ༨ΓΛɺ಺༰ͷมԽྔʹԠׂͯ͡Γ౰͍ͯͯΔ
    w ςΩετྔ͕ଟ͍΄Ͳ෯͕޿͘ͳΔ
    w ݫີʹ͸࠷খͱ࠷େͷมԽྔͰ෯ׂ͕ΓৼΒΕΔ
    w มԽྔ͕গͳ͍ηϧʹ͸ڱ͍෯
    w มԽྔ͕ଟ͍ηϧʹ͸޿͍෯
    ·ͱΊΔͱʜ
    

    View Slide

41. ·ͱΊΔͱʜ
    

    View Slide

42. ࠷ޙʹɺ͞Βʹ΋͏Ұา
    

    View Slide

43. w ࢓૊ΈΛ஌ͬͯ΋΍ͬͺΓ࣮ࡍʹಈ͔͢ͷ͕ཧ૝త
    w ࢓૊ΈΛ஌Δͷ͸ʮμϝ͔΋ʯʹහײʹͳΔͨΊ
    w ࣮ࡍʹͲ͏ͳΔ͔ΛσβΠϯஈ֊Ͱ͔֬ΊΒΕΔͱ҆৺
    w ෦෼తʹͰ΋͍͍ͷͰ࡞ͬͯΈΔͱͲ͏ͳΔ͔͕Θ͔Δ
    w ࣮ࡍͷಈ࡞͕ݕূ͞ΕͨσβΠϯ͸࣮૷ऀ΋҆৺
    w +4'JEEMFͱ͔$0%&1&/ͱ͔͕खܰ
    ࣮ࡍʹಈ͘΋ͷͰ֬ೝ
    มͳද૊ΈʹͳΓͦ͏ͱ͍͏༧ײ͕ͨ͠Βɺ࣮ࡍʹ֬ೝ͢Δͷ͕ۙಓ
    

    View Slide

44. ΑΓৄ͍͠৘ใ͸ʜ
    ϐΫηϧάϦουͰ͸༗ྉͷٕज़৘ใ഑৴Λ͍ͯ͠·͢
    ࠓճ঺հͨ͠಺༰ͷΑΓৄ͍͠هࣄ΋͋Γ·͢
    

    View Slide

45. 6*σβΠφʔืू͍ͯ͠·͢
    ϐΫηϧάϦουͰ͸Ұॹʹಇ͍ͯ͘ΕΔ
    6*σβΠφʔΛืू͍ͯ͠·͢
    

    View Slide

46. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠
    

    View Slide