Col Syntax
<table>
<caption>2017-18: Tennis</caption>
<colgroup>
<col class="week"/>
<col class="player"/>
<col class="club"/>
<col class="stat"/>
</colgroup>
</table>
Setting styles will change the entire column, but limited attributes allowed
Caption
specifies title of table, always first child, inherits from table, good for accessibility
styled with caption-side, can be top, bottom; experimental in firefox is left, or right
table {
caption-side: top;
}
caption {
color: #CC0000;
}
Border
If you want real table dividing, then
table, th, td {border: 1px solid}
Could just add padding to th and td
Border-spacing
2 values: horizontal and vertical padding
If you make entire tr color, spacing wouldn't be color
Border-collapse
seperate(default), collapse(spacing irrelevant)
Other
Empty-Cell
table { //can also be on td
empty-cell: show | hide;
}
//equivalent to
Td:empty, Th:empty {
visibility: none
}
Vertical Align
Vertical-align: baseline | sub |super |text-top | text-bottom | middle | top | bottom | <percentage> | <length>
Recall baseline means have all the bottom first text line be aligned( significant if multiple font sizes)
General Beauty
td, th {
padding: 5px 0 5px 10px;
}
table {
border: 1px solid;
border-collapse: collapse;
}
thead tr th {
border-bottom: 1px solid;
background-color: #dedede;
}
tbody tr:nth-of-type(even){
background-color: #00000010;
//add black with hgih alpha to every other row in body
}
