Tables


Tag Name Description
<table> Table The wrapper element for all HTML tables.
<thead> Table Head The set of rows defining the column headers in a table.
<tbody> Table Body The set of rows containing actual table data.
<tr> Table Row The table row container.
<td> Table Data The table row container.
<tfoot> Table Foot The set of rows defining the footer in a table.

Forms

Important things to remember about forms

Tag Attributes Description
<form>actionWhere to send your form inputs. Add destination url
methodtells the form what to do with that information once it’s sent. Uses HTTP verb such as "POST" and "PUT"
<input> type Type of input such as:
text a simple textbox
passworda textbox that hides the input values in *astericks
numbertextbox that reads numbers with option to add on the step attribute
rangeslider type with option to add min, max and step attribute
checkboxa simple checkbox
radioa simple radio button
submitcreates a submit button
id id of the table that matches with <label> or any other
name Description of the input value such as "username". When sent, it will be displayed as name=value
value Value of the input. If you want to pre-fill the input, define a value
step Amount that increases when you have a 'number' or 'range' input type. Set the value to "1" and arrows will increase or decrease the value in the input by 1
listwhen using <datalist> make sure the value matches datalist id
requiredmakes input required
min / maxsets the minimum or maximum for number type
minlength / maxlengthsets the minimum or maximum character length for text type
patternassign a regular expression(regex) e.g. pattern="[a-zA-Z0-9]+" requires input to include only numbers and latin characters.
<select> creates a dropdown selector. Pair it with <option value=""> to create the value for each selection
<datalist> Pair it with <input type="text" list=""> which value corresponds to <datalist> id. Add <option value=""> for each searchable value
<textarea> create a larger textbox defined by row="" and col="" attribute

Flexbox

Property Value Description
major axis (horizontal align)
justify-content
flex-wrap
flex-grow
flex-shrink
cross axis (vertical align)
align-items
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.
Other
flex-direction row default value: elements will be positioned as a row
row-reverse elements will be positioned in a row from right to left
column starting from top left corner elements will be stacked in a column
column-reverse starting from bottom left corner elements will be stacked from the bottom