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. |
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. |
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. |
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. |
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. |