Use more semantic HTML for tables
This commit is contained in:
parent
b08281c861
commit
f4cc6b1a09
|
@ -15,14 +15,23 @@
|
|||
table {
|
||||
width: 100%;
|
||||
line-height: 2.0em;
|
||||
border-collapse: collapse;
|
||||
margin-top: 1.0em;
|
||||
}
|
||||
.tableTitleRow {
|
||||
font-weight: bold;
|
||||
table tr:nth-child(odd) {
|
||||
background-color: #F0F0F0;
|
||||
}
|
||||
table tr td:first-child {
|
||||
width: 60%;
|
||||
}
|
||||
table td {
|
||||
padding: 0;
|
||||
}
|
||||
table caption {
|
||||
text-align: left;
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
}
|
||||
.backgroundColorRow {
|
||||
background-color: #F0F0F0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
@ -34,33 +43,36 @@
|
|||
|
||||
<p>This way you can go through all your news via the space bar.</p>
|
||||
|
||||
<table cellspacing="0" cellpadding="0">
|
||||
<table>
|
||||
<caption>Everywhere…</caption>
|
||||
|
||||
<tr class="tableTitleRow"><td colspan="2">Everywhere…</td></tr>
|
||||
<tr class="backgroundColorRow"><td>Scroll or go to next unread</td><td>space bar</td></tr>
|
||||
<tr><td>Go to next unread</td><td>+</td></tr>
|
||||
<tr class="backgroundColorRow"><td>Mark as read</td><td>r</td></tr>
|
||||
<tr><td>Mark all as read</td><td>k</td></tr>
|
||||
<tr class="backgroundColorRow"><td>Mark older articles as read</td><td>o</td></tr>
|
||||
<tr><td>Mark all as read, go to next unread</td><td>l (lowercase L)</td></tr>
|
||||
<tr class="backgroundColorRow"><td>Mark as unread, go to next unread</td><td>m</td></tr>
|
||||
<tr><td>Mark as unread</td><td>u</td></tr>
|
||||
<tr class="backgroundColorRow"><td>Open in browser</td><td>b or return or enter</td></tr>
|
||||
<tr><td>Previous subscription</td><td>a</td></tr>
|
||||
<tr class="backgroundColorRow"><td>Next subscription</td><td>z</td></tr>
|
||||
<tr><td>Scroll or go to next unread</td><td>space bar</td></tr>
|
||||
<tr><td>Go to next unread</td><td>+</td></tr>
|
||||
<tr><td>Mark as read</td><td>r</td></tr>
|
||||
<tr><td>Mark all as read</td><td>k</td></tr>
|
||||
<tr><td>Mark older articles as read</td><td>o</td></tr>
|
||||
<tr><td>Mark all as read, go to next unread</td><td>l (lowercase L)</td></tr>
|
||||
<tr><td>Mark as unread, go to next unread</td><td>m</td></tr>
|
||||
<tr><td>Mark as unread</td><td>u</td></tr>
|
||||
<tr><td>Open in browser</td><td>b or return or enter</td></tr>
|
||||
<tr><td>Previous subscription</td><td>a</td></tr>
|
||||
<tr><td>Next subscription</td><td>z</td></tr>
|
||||
</table>
|
||||
|
||||
<tr><td colspan="2"> <br /></td></tr>
|
||||
<tr><td colspan="2" class="tableTitleRow">Left sidebar only…</td></tr>
|
||||
<tr class="backgroundColorRow"><td>Collapse</td><td>, or option-leftArrow</td></tr>
|
||||
<tr><td>Expand</td><td>. or option-rightArrow</td></tr>
|
||||
<tr class="backgroundColorRow"><td>Collapse All (except for group items)</td><td>; or option-cmd-leftArrow</td></tr>
|
||||
<tr><td>Expand All</td><td>' or option-cmd-rightArrow</td></tr>
|
||||
<tr class="backgroundColorRow"><td>Move focus to headlines</td><td>rightArrow</td></tr>
|
||||
<table>
|
||||
<caption>Left sidebar only…</caption>
|
||||
|
||||
<tr><td colspan="2"> <br /></td></tr>
|
||||
<tr><td colspan="2" class="tableTitleRow">Timeline only…</td></tr>
|
||||
<tr class="backgroundColorRow"><td>Move focus to subscriptions</td><td>leftArrow</td></tr>
|
||||
<tr><td>Collapse</td><td>, or option-leftArrow</td></tr>
|
||||
<tr><td>Expand</td><td>. or option-rightArrow</td></tr>
|
||||
<tr><td>Collapse All (except for group items)</td><td>; or option-cmd-leftArrow</td></tr>
|
||||
<tr><td>Expand All</td><td>' or option-cmd-rightArrow</td></tr>
|
||||
<tr><td>Move focus to headlines</td><td>rightArrow</td></tr>
|
||||
</table>
|
||||
|
||||
<table>
|
||||
<caption>Timeline only…</caption>
|
||||
|
||||
<tr><td>Move focus to subscriptions</td><td>leftArrow</td></tr>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
|
|
Loading…
Reference in New Issue