CSS TABLE

CSS :: Table Property :: Indexeslink

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


CSS :: table property :: table-layoutlink

property:table-layout
value:auto คือตารางจะเปลี่ยนแปลงขนาดตามความเหมาะสม,
fixed คือตารางจะมีขนาดตายตัว
content:ใช้กำหนดรูปแบบความยืดหยุ่นของตาราง
example:{ table-layout: auto; }


CSS :: table property :: caption-sidelink

property:caption-side
value:top, bottom, left, right
content:ใช้กำหนดตำแหน่งของ caption
example:{ caption-side: right; }


CSS :: table property :: empty-cellslink

property:empty-cells
value:show, hidden
content:ใช้กำหนดรูปแบบการแสดงผลเมื่อ cell ว่าง
example:{ empty-cells: hidden; }


CSS :: table property :: border-collapselink

property:border-collapse
value:collapse, separate
content:ใช้กำหนดเส้นขอบระหว่าง cell ว่าจะใช้ด้วยกันหรือไม่
example:{ border-collapse: collapse; }


CSS :: table property :: border-spacinglink

property:border-spacing
value:cm, px, pt
content:ใช้กำหนดระยะห่างระหว่าง cell
โดยจะมีผลเมื่อ border-collapse เป็นแบบ separate เท่านั้น
example:{ border-spacing: 2px; }


CSS :: table property :: border-top-widthlink

property:border-top-width
value:thin, medium, thick, cm, px, pt
content:ใช้กำหนดขนาดของเส้นขอบ ด้านบน
example:{ border-top-width: 2px; }


CSS :: table property :: border-right-widthlink

property:border-right-width
value:thin, medium, thick, cm, px, pt
content:ใช้กำหนดขนาดของเส้นขอบ ด้านขวา
example:{ border-right-width: thin; }


CSS :: table property :: border-bottom-widthlink

property:border-bottom-width
value:thin, medium, thick, cm, px, pt
content:ใช้กำหนดขนาดของเส้นขอบ ด้านล่าง
example:{ border-bottom-width: medium; }


CSS :: table property :: border-left-widthlink

property:border-left-width
value:thin, medium, thick, cm, px, pt
content:ใช้กำหนดขนาดของเส้นขอบ ด้านซ้าย
example:{ border-left-width: thick; }


CSS :: table property :: border-widthlink

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 ด้านเหมือนกัน


CSS :: table property :: border-top-stylelink

property:border-top-style
value:none, hidden, dotted, dashed, solid, groove, ridge, inset, outset, double
content:ใช้กำหนดลักษณะของเส้นขอบ ด้านบน
example:{ border-top-style: solid; }


CSS :: table property :: border-right-stylelink

property:border-right-style
value:none, hidden, dotted, dashed, solid, groove, ridge, inset, outset, double
content:ใช้กำหนดลักษณะของเส้นขอบ ด้านขวา
example:{ border-right-style: dotted; }


CSS :: table property :: border-bottom-stylelink

property:border-bottom-style
value:none, hidden, dotted, dashed, solid, groove, ridge, inset, outset, double
content:ใช้กำหนดลักษณะของเส้นขอบ ด้านล่าง
example:{ border-bottom-style: ridge; }


CSS :: table property :: border-left-stylelink

property:border-left-style
value:none, hidden, dotted, dashed, solid, groove, ridge, inset, outset, double
content:ใช้กำหนดลักษณะของเส้นขอบ ด้านซ้าย
example:{ border-left-style: outset; }


CSS :: table property :: border-stylelink

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 ด้านเหมือนกัน


CSS :: table property :: border-top-colorlink

property:border-top-color
value:ชื่อสี, #ค่าสี, rgb( ตัวเลข, ตัวเลข, ตัวเลข )
content:ใช้กำหนดสีให้เส้นขอบ ด้านบน
example:{ border-top-color: red; }


CSS :: table property :: border-right-colorlink

property:border-right-color
value:ชื่อสี, #ค่าสี, rgb( ตัวเลข, ตัวเลข, ตัวเลข )
content:ใช้กำหนดสีให้เส้นขอบ ด้านขวา
example:{ border-right-color: green; }


CSS :: table property :: border-bottom-colorlink

property:border-bottom-color
value:ชื่อสี, #ค่าสี, rgb( ตัวเลข, ตัวเลข, ตัวเลข )
content:ใช้กำหนดสีให้เส้นขอบ ด้านล่าง
example:{ border-bottom-color: blue; }


CSS :: table property :: border-left-colorlink

property:border-left-color
value:ชื่อสี, #ค่าสี, rgb( ตัวเลข, ตัวเลข, ตัวเลข )
content:ใช้กำหนดสีให้เส้นขอบ ด้านซ้าย
example:{ border-left-color: #c0c0c0; }


CSS :: table property :: border-colorlink

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 ด้านเหมือนกัน


CSS :: table property :: border-toplink

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


CSS :: table property :: border-rightlink

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


CSS :: table property :: border-bottomlink

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


CSS :: table property :: border-leftlink

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


CSS :: table property :: borderlink

property:border
content:ใช้กำหนดค่าของ property border-width, border-style, border-color
ได้พร้อมกันตามลำดับ
example:{ border: thin dotted #f0f0f0; }