CSS3 Table Layouts tutorial for Beginner

1
CSS3 Table Layouts Tutorial Videos for
Beginners by
2
Highlights

• Table Layout
• Auto Table Layout
• Fixed Table Layout
• Border-spacing Property
• Border-collapse Property

3
Table Layout

•  Sets the table layout algorithm to be used for a
  table.
• Syntax table  table-layout Value . its
  default value is Initial, it uses inherit
  property to obtain parent properties
• Table layout value would be anyone of below
  properties.
•    

4
Auto Table Layout

• Auto layout value creates automatic table layout
  algorithm.
• Column width is set by the widest indestructible
  content in the cells.
• Commonly used by most browsers for table layout. 
• Width of the table and its cells depends on the
  content.
• Syntax table table-layout auto

5
Fixed Table Layout

• Fixed value describes fixed layout algorithm for
  the table.
• Fixed value Allows a browser to lay out the table
  faster than the automatic table layout.
•  Browsers starts displaying the table whenever
  the first row has been created.
• Rendering speed is greater than auto table
  layout.
• Syntax table table-layout fixed

6
Border-spacing Property

• Specifies the distance between the borders of
  adjacent table cells.
• Similar as cell spacing attribute of HTML.
  Syntax border-spacing value
• Border spacing values three types. They are
  length, horizontal, vertical.
• Length describes both the horizontal and vertical
  spacing between cells.
• Horizontal value describes the horizontal spacing
  between cells.
• Vertical value describes the vertical spacing
  between cells.

7
Border-collapse Property

• Determines whether a table's borders are
  separated or collapsed.
• In collapsed model one table cell share borders
  with adjacent cells.
• Syntax border-collapse value collapse and
  separate are the two values of collapse property.
• Separate keyword request the use of the separated
  border table rendering model.
• Collapse keyword request the use of the collapsed
  border table rendering model.
• Separate is the initial or default value.

8
Feedback
Like It ? Hate It?
We would love to hear from you whatever you think
about the course.
Click HERE to share what you think!
9
Thank you
Thank You for Watching CSS3 Table Layouts
Tutorial Videos for Beginner by
http//www.courseing.com