Notes for Tables & Lists

By Scott Granneman & Jans Carton

Find the presentation at http://www.granneman.com/presentations/

## Slide 14

http://www.w3.org/TR/html5/tabular-data.html#the-table-element

## Slide 15

http://www.w3.org/TR/html5/tabular-data.html#the-tr-element

## Slide 16

http://www.w3.org/TR/html5/tabular-data.html#the-th-element

## Slide 17

http://www.w3.org/TR/html5/tabular-data.html#the-td-element

## Slide 18

http://codepen.io/websanity/pen/infKs?editors=100

## Slide 19

http://codepen.io/websanity/pen/infKs?editors=100

## Slide 20

http://www.w3.org/TR/html5/tabular-data.html#attr-tdth-colspan

http://www.w3.org/TR/html5/tabular-data.html#attr-tdth-rowspan

## Slide 21

http://codepen.io/websanity/pen/zrIyg

## Slide 24

http://www.w3.org/TR/html5/tabular-data.html#the-thead-element

## Slide 25

http://www.w3.org/TR/html5/tabular-data.html#the-tbody-element

## Slide 26

http://www.w3.org/TR/html5/tabular-data.html#the-tfoot-element

## Slide 27

http://codepen.io/websanity/pen/cjplv?editors=100

## Slide 30

http://www.w3.org/TR/html5/tabular-data.html#the-caption-element 

## Slide 31

http://codepen.io/websanity/pen/jaxwz?editors=110

## Slide 32

http://www.w3.org/TR/CSS21/tables.html#caption-side

## Slide 33

http://codepen.io/websanity/pen/CilJj?editors=110

## Slide 34

Bootstrap 4: https://getbootstrap.com/docs/4.5/content/tables/#captions 

## Slide 35

https://en.wikipedia.org/wiki/Cthulhu_Mythos_deities#Great_Old_Ones 

## Slide 38

https://codepen.io/websanity/pen/qBrJPxE?editors=1000 

## Slide 39

http://www.w3.org/TR/CSS21/tables.html#empty-cells

## Slide 40

http://codepen.io/websanity/pen/cjplv?editors=100

## Slide 41

http://codepen.io/websanity/pen/Axbhv?editors=110

## Slide 42

http://www.w3.org/TR/CSS21/tables.html#border-collapse

## Slide 43

http://codepen.io/websanity/pen/xaLbw

## Slide 44

http://www.w3.org/TR/CSS21/tables.html#border-spacing

## Slide 45

http://codepen.io/websanity/pen/CbaKm

## Slide 46

https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout 

## Slide 47

https://codepen.io/websanity/pen/KKVBgva?editors=1100 

## Slide 48

https://codepen.io/websanity/pen/KKVBgva?editors=1100 

## Slide 51

http://www.w3.org/TR/html5/tabular-data.html#the-colgroup-element

## Slide 52

For instance, text-align would be great if you could apply it to a <col> or <colgroup>
http://www.w3.org/TR/html5/tabular-data.html#the-col-element

visibility: collapse is problematic; see http://css-tricks.com/almanac/properties/v/visibility/

## Slide 53

http://codepen.io/websanity/pen/xfjdE?editors=110 

## Slide 55

See https://www.w3.org/TR/2014/WD-html51-20140617/tabular-data.html#table-sorting-model & https://github.com/w3c/html/issues/56 

## Slide 56

http://www.granneman.com/webdev/coding/css/sorting-tables/ 

Another example: https://datatables.net/examples/styling/bootstrap4.html 

## Slide 57

Table Capture extension for Chromium-based browsers: https://chrome.google.com/webstore/detail/table-capture/iebpjdmgckacbodjpijphcplhebcmeop/reviews 

Table Capture extension for Firefox: https://addons.mozilla.org/en-US/firefox/addon/table-capture-firefox/ 

## Slide 61

http://codepen.io/websanity/pen/bgjygG?editors=0100

## Slide 62

http://codepen.io/websanity/pen/bgjygG?editors=0100

## Slide 64

http://codepen.io/websanity/pen/VPBNQM?editors=1000

## Slide 65

http://codepen.io/websanity/pen/VPBNQM?editors=1000 

## Slide 66

http://codepen.io/websanity/pen/VPBNQM?editors=1000

## Slide 68

http://codepen.io/websanity/pen/PWBvYV?editors=1100 

## Slide 71

http://www.csstablegenerator.com

## Slide 72

https://www.tablesgenerator.com/html_tables  

## Slide 73

https://www.tablesgenerator.com/html_tables  

## Slide 74

https://www.tablesgenerator.com/html_tables  

## Slide 75

https://www.tablesgenerator.com/html_tables  

## Slide 76

https://www.tablesgenerator.com/html_tables  

## Slide 77

https://www.tablesgenerator.com/html_tables  

## Slide 78

https://www.tablesgenerator.com/html_tables  

## Slide 79

https://www.tablesgenerator.com/html_tables  

## Slide 80

https://www.tablesgenerator.com/html_tables  

## Slide 81

https://www.tablesgenerator.com/html_tables  

## Slide 82

https://www.tablesgenerator.com/html_tables  

## Slide 83

https://www.tablesgenerator.com/html_tables  

## Slide 84

https://www.tablesgenerator.com/html_tables  

## Slide 85

https://www.tablesgenerator.com/html_tables  

## Slide 86

https://www.tablesgenerator.com/html_tables  

## Slide 87

https://en.wikipedia.org/wiki/Comma-separated_values

## Slide 92

https://www.tablesgenerator.com/html_tables  

## Slide 93

https://www.tablesgenerator.com/html_tables  

## Slide 94

https://www.tablesgenerator.com/html_tables  

## Slide 95

https://www.tablesgenerator.com/html_tables  

## Slide 96

https://www.tablesgenerator.com/latex_tables 

## Slide 97

https://www.tablesgenerator.com/text_tables 

## Slide 98

https://www.tablesgenerator.com/markdown_tables 

## Slide 99

https://www.tablesgenerator.com/mediawiki_tables 

## Slide 102

http://codepen.io/websanity/pen/urnIt?editors=110

## Slide 103

http://codepen.io/websanity/pen/urnIt?editors=110

## Slide 104

https://codepen.io/websanity/pen/WZPBad?editors=1100

Also see https://codepen.io/websanity/pen/MYoxPZ for an example with JavaScript that automates the process a bit

## Slide 105

https://codepen.io/websanity/pen/WZPBad?editors=1100

Also see https://codepen.io/websanity/pen/MYoxPZ for an example with JavaScript that automates the process a bit

## Slide 109

http://css.maxdesign.com.au/listamatic/

## Slide 110

http://css.maxdesign.com.au/listamatic/horizontal01.htm

## Slide 111

add list of properties

## Slide 113

http://www.w3.org/TR/css3-lists/#propdef-list-style-type

## Slide 114

https://codepen.io/websanity/pen/ZELwNrE?editors=1100

## Slide 116

a (lowercase letters), A (uppercase letters), i (lowercase Roman numerals), I (uppercase Roman numerals), & 1 (Arabic numerals)

## Slide 117

For the full list, see http://www.w3.org/TR/2013/WD-css-counter-styles-3-20130221/ & https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type

## Slide 118

https://developer.mozilla.org/en-US/docs/Web/CSS/%40counter-style/system 

## Slide 119

https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type

## Slide 120

http://codepen.io/websanity/pen/FjJBL?editors=010

## Slide 121

http://www.w3.org/TR/css3-lists/#propdef-list-style-image

## Slide 122

http://codepen.io/websanity/pen/vmudw

## Slide 123

http://www.w3.org/TR/css3-lists/#list-style-position-property

## Slide 125

http://codepen.io/websanity/pen/Eabyn

## Slide 126

http://www.w3.org/TR/css3-lists/#list-style-property

## Slide 127

http://codepen.io/websanity/pen/AFcLp?editors=110

## Slide 129

https://codepen.io/websanity/pen/NWxBrjJ?editors=1100

FIXME add compatibility table, because Safari doesn’t really support ::marker

## Slide 130

https://codepen.io/websanity/pen/NWxBrjJ?editors=1100

## Slide 134

http://codepen.io/websanity/pen/xoqGl?editors=110

## Slide 142

http://codepen.io/websanity/pen/BIgHp?editors=110

## Slide 145

http://codepen.io/websanity/pen/GgLoB?editors=110

## Slide 146

http://codepen.io/websanity/pen/GgLoB?editors=110

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Counters

## Slide 148

http://codepen.io/websanity/pen/Hdmyc

## Slide 149

http://codepen.io/websanity/pen/Hdmyc

## Slide 150

http://codepen.io/websanity/pen/Hdmyc

## Slide 151

http://caniuse.com/#feat=css-counters

http://www.browsersupport.net/CSS/content%3Acounters%28%29