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