CSS table property : สอน property ของ table property, เรียน property ของ table property
 

Reference

Reference ในเว็บไซต์ Function.in.th เป็นการนำเสนอความรู้ในรูปแบบของแหล่งอ้างอิงของคำสั่งต่าง ๆ ที่ใช้ในการเขียนโปรแกรม โดยผู้ที่สนใจสามารถเข้ามาเรียนรู้การใช้งานคำสั่งของการเขียนโปรแกรมเหล่านี้ได้ ผ่านทาง URL code.function.in.th ทั้งนี้ผู้อ่านยังสามารถร่วมแสดงความคิดเห็นบนเนื้อหาที่มีสอนได้ ซึ่งถือเป็นการส่งเสริมให้มีการแลกเปลี่ยนประสบการณ์และความรู้ระหว่างผู้อ่านด้วยกันเอง
  • table-layout ใช้กำหนดรูปแบบความยืดหยุ่นของตาราง
    caption-side ใช้กำหนดตำแหน่งของ caption
    empty-cells ใช้กำหนดรูปแบบการแสดงผลเมื่อ cell ว่าง
    border-collapse ใช้กำหนดเส้นขอบระหว่าง cell ว่าจะใช้ด้วยกันหรือไม่
    border-spacing ใช้กำหนดระยะห่างระหว่าง cell
    border-top-width ใช้กำหนดขนาดของเส้นขอบ ด้านบน
    border-right-width ใช้กำหนดขนาดของเส้นขอบ ด้านขวา
    border-bottom-width ใช้กำหนดขนาดของเส้นขอบ ด้านล่าง
    border-left-width ใช้กำหนดขนาดของเส้นขอบ ด้านซ้าย
    border-width ใช้กำหนดค่าของ property border width
    border-top-style ใช้กำหนดลักษณะของเส้นขอบ ด้านบน
    border-right-style ใช้กำหนดลักษณะของเส้นขอบ ด้านขวา
    border-bottom-style ใช้กำหนดลักษณะของเส้นขอบ ด้านล่าง
    border-left-style ใช้กำหนดลักษณะของเส้นขอบ ด้านซ้าย
    border-style ใช้กำหนดค่าของ property border style
    border-top-color ใช้กำหนดสีให้เส้นขอบ ด้านบน
    border-right-color ใช้กำหนดสีให้เส้นขอบ ด้านขวา
    border-bottom-color ใช้กำหนดสีให้เส้นขอบ ด้านล่าง
    border-left-color ใช้กำหนดสีให้เส้นขอบ ด้านซ้าย
    border-color ใช้กำหนดค่าของ property border color
    border-top ใช้กำหนดค่าของ property border top
    border-right ใช้กำหนดค่าของ property border right
    border-bottom ใช้กำหนดค่าของ property border bottom
    border-left ใช้กำหนดค่าของ property border left
    border ใช้กำหนดค่าของ property border
  • property :
    table-layout

    value :
    auto คือตารางจะเปลี่ยนแปลงขนาดตามความเหมาะสม, 
    fixed คือตารางจะมีขนาดตายตัว

    content :
    ใช้กำหนดรูปแบบความยืดหยุ่นของตาราง

    example :
    { table-layout: auto; }

  • property :
    caption-side

    value :
    top, bottom, left, right

    content :
    ใช้กำหนดตำแหน่งของ caption

    example :
    { caption-side: right; }

  • property :
    empty-cells

    value :
    show, hidden

    content :
    ใช้กำหนดรูปแบบการแสดงผลเมื่อ cell ว่าง

    example :
    { empty-cells: hidden; }

  • property :
    border-collapse

    value :
    collapse, separate

    content :
    ใช้กำหนดเส้นขอบระหว่าง cell ว่าจะใช้ด้วยกันหรือไม่

    example :
    { border-collapse: collapse; }

  • property :
    border-spacing

    value :
    cm, px, pt

    content :
    ใช้กำหนดระยะห่างระหว่าง cell 
    โดยจะมีผลเมื่อ border-collapse เป็นแบบ separate เท่านั้น

    example :
    { border-spacing: 2px; }

  • property :
    border-top-width

    value :
    thin, medium, thick, cm, px, pt

    content :
    ใช้กำหนดขนาดของเส้นขอบ ด้านบน

    example :
    { border-top-width: 2px; }

  • property :
    border-right-width

    value :
    thin, medium, thick, cm, px, pt

    content :
    ใช้กำหนดขนาดของเส้นขอบ ด้านขวา

    example :
    { border-right-width: thin; }

  • property :
    border-bottom-width

    value :
    thin, medium, thick, cm, px, pt

    content :
    ใช้กำหนดขนาดของเส้นขอบ ด้านล่าง

    example :
    { border-bottom-width: medium; }

  • property :
    border-left-width

    value :
    thin, medium, thick, cm, px, pt

    content :
    ใช้กำหนดขนาดของเส้นขอบ ด้านซ้าย

    example :
    { border-left-width: thick; }

  • property :
    border-width

    content :
    ใช้กำหนดค่าของ property border-top-width, border-right-width, border-bottom-width,
    border-left-width ได้พร้อมกันตามลำดับ

    example :
    { border-width: 2px thin medium thick; }

    comment :
    ถ้ากำหนดเพียงค่าข้อมูลเดียว จะหมายถึงกำหนดให้ทั้ง 4 ด้านเหมือนกัน

  • property :
    border-top-style

    value :
    none, hidden, dotted, dashed, solid, groove, ridge, inset, outset, double

    content :
    ใช้กำหนดลักษณะของเส้นขอบ ด้านบน

    example :
    { border-top-style: solid; }

  • property :
    border-right-style

    value :
    none, hidden, dotted, dashed, solid, groove, ridge, inset, outset, double

    content :
    ใช้กำหนดลักษณะของเส้นขอบ ด้านขวา

    example :
    { border-right-style: dotted; }

  • property :
    border-bottom-style

    value :
    none, hidden, dotted, dashed, solid, groove, ridge, inset, outset, double

    content :
    ใช้กำหนดลักษณะของเส้นขอบ ด้านล่าง

    example :
    { border-bottom-style: ridge; }

  • property :
    border-left-style

    value :
    none, hidden, dotted, dashed, solid, groove, ridge, inset, outset, double

    content :
    ใช้กำหนดลักษณะของเส้นขอบ ด้านซ้าย

    example :
    { border-left-style: outset; }

  • property :
    border-style

    content :
    ใช้กำหนดค่าของ property border-top-style, border-right-style, border-bottom-style,
    border-left-style ได้พร้อมกันตามลำดับ

    example :
    { border-style: solid double ridge outset; }

    comment :
    ถ้ากำหนดเพียงค่าข้อมูลเดียว จะหมายถึงกำหนดให้ทั้ง 4 ด้านเหมือนกัน

  • property :
    border-top-color

    value :
    ชื่อสี, #ค่าสี, rgb( ตัวเลข, ตัวเลข, ตัวเลข )

    content :
    ใช้กำหนดสีให้เส้นขอบ ด้านบน

    example :
    { border-top-color: red; }

  • property :
    border-right-color

    value :
    ชื่อสี, #ค่าสี, rgb( ตัวเลข, ตัวเลข, ตัวเลข )

    content :
    ใช้กำหนดสีให้เส้นขอบ ด้านขวา

    example :
    { border-right-color: green; }

  • property :
    border-bottom-color

    value :
    ชื่อสี, #ค่าสี, rgb( ตัวเลข, ตัวเลข, ตัวเลข )

    content :
    ใช้กำหนดสีให้เส้นขอบ ด้านล่าง

    example :
    { border-bottom-color: blue; }

  • property :
    border-left-color

    value :
    ชื่อสี, #ค่าสี, rgb( ตัวเลข, ตัวเลข, ตัวเลข )

    content :
    ใช้กำหนดสีให้เส้นขอบ ด้านซ้าย

    example :
    { border-left-color: #c0c0c0; }

  • property :
    border-color

    content :
    ใช้กำหนดค่าของ property border-top-color, border-right-color, border-bottom-color,
    border-left-color ได้พรอ้มกันตามลำดับ

    example :
    { border-color: red green blue #c0c0c0; }

    comment :
    ถ้ากำหนดเพียงค่าข้อมูลเดียว จะหมายถึงกำหนดให้ทั้ง 4 ด้านเหมือนกัน

  • property :
    border-top

    content :
    ใช้กำหนดค่าของ property border-top-width, border-top-style, border-top-color,
    ได้พร้อมกันตามลำดับ

    example :
    { border-top: 2px solid red; }

  • property :
    border-right

    content :
    ใช้กำหนดค่าของ property border-right-width, border-right-style, border-right-color,
    ได้พร้อมกันตามลำดับ

    example :
    { border-right: thin double green; }

  • property :
    border-bottom

    content :
    ใช้กำหนดค่าของ property border-bottom-width, border-bottom-style, border-bottom-color,
    ได้พร้อมกันตามลำดับ

    example :
    { border-bottom: medium ridge blue; }

  • property :
    border-left

    content :
    ใช้กำหนดค่าของ property border-left-width, border-left-style, border-left-color,
    ได้พร้อมกันตามลำดับ

    example :
    { border-left: thick outset #c0c0c0; }

  • property :
    border

    content :
    ใช้กำหนดค่าของ property border-width, border-style, border-color 
    ได้พร้อมกันตามลำดับ

    example :
    { border: thin dotted #f0f0f0; }

 
Share This Chapter Login with Facebook