HTML

Table Elements

Tag Elements Description
<table> Table The wrapper element for all HTML tables.
<th> Table Head The thead tag is used to group header content in an HTML table.
<tr> Table Row The set of rows defining the column headers in a table.
<td> Table Data The td tag defines a standard cell in an HTML table.
<tbody> Table Body The tbody tag is used to group the body content in an HTML table.
<thead> Table Heading A table header is defined with the th tag.
<tfoot> Table Footer The foot tag is used to group footer content in an HTML table.

Table Attributes

Attributes Description
Rowspan The rowspan attribute specifies the number of rows a cell should span.
Colspan The colspan attribute defines the number of columns a cell should span.

CSS

Positioning

Properties Description
Z-index Control the stacking order of elements—higher number is closer.
Fixed Forces an element to not move when the page is scrolled.
Absolute Move an element around based on coordinates.
Relative The element is positioned relative to its normal position.
Float It determines how far left/right an element should float within its parent element.
Block-level Take up the full width of their container, margin, padding & width work.
Inline Allows other elements beside; margin, padding & width don’t work.
Inline-block Allows other elements beside; margin, padding & width work. Can create columns, but will force a space between boxes.

The Box Model

Properties Description
Content-box The default box calculation math puts the padding & border outside the width set in CSS.
Border-box Simplifies the responsive math by making the width of a box, as set in CSS, not change by adding padding and border.
Padding Padding is the space between the content area and the border. It can be set in pixels or percent.
Margin Margin is the amount of spacing outside of an element’s border.
Overflow Control how elements that break out the edges of the box are dealt with.

Flexbox

Properties Value Description
Main axis/horizontal
Justify-content This defines the alignment along the main axis.
Flex-wrap By default, flex items will all try to fit onto one line. You can change that and allow the items to wrap as needed with this property.
Flex-grow This defines the ability for a flex item to grow if necessary.
Flex-shrink This defines the ability for a flex item to shrink if necessary.
Cross axis/vertical
Align-items Think of it as the justify-content version for the cross axis.
Align-content flex-start Elements will be positioned at the top of the parent container with no space in-between.
flex-end Elements will be positioned at the bottom of the parent container with no space in-between.
Center Elements will be positioned at the center of the parent container with no space in-between.
Space-between Elements will be positioned on top and bottom with space between them.
Space-around Elements will be positioned with even space between them and from top and bottom.
Stretch If min-height or no height is specified, elements will stretch to fill the gap between top and bottom of parent container.
Direction
Flex-Direction Row The flexbox items are ordered the same way as the text direction, along the main axis.
Row-reverse The flexbox items are ordered the opposite way as the text direction, along the main axis.
Column The flexbox items are ordered the same way as the text direction, along the cross axis.
Column-reverse The flexbox items are ordered the opposite way as the text direction, along the cross axis.