Table: use html sections and outlines

src/components/Table.js

@@ -87,11 +87,11 @@ export default initial_vnode => {
 				model.select(offset, limit)
 			}
 
-			return m('main', {
+			return m('article', {
 				style: vnode.attrs.show ? undefined : {display: 'none'}
 			}, [
 				// the table
-				m('table', [
+				m('section', m('table', [
 					// always show table header
 					m('thead', m('tr', [
 						vnode.attrs.serial ? m('th.centered', '序号') : undefined,
@@ -122,22 +122,22 @@ export default initial_vnode => {
 							return m(`td${column.class || ''}`, {style: column.style || undefined}, v)
 						})
 					]))) : undefined
-				]),
+				])),
 
 				// status area
-				model.data(offset, limit).length ? undefined : (
+				m('section', model.data(offset, limit).length ? undefined : (
 					model.loading() ? (vnode.attrs.loading_indicator || m('', 'Loading')) : (vnode.attrs.empty_indicator || m('', 'Empty'))
-				),
+				)),
 
 				// the page navigation
-				(pages.length > 1) ? m('.centered', m('.pagination.centered', pages.map(
+				m('section', (pages.length > 1) ? m('.centered', m('.pagination.centered', pages.map(
 					(page, i) => page.show ? m('a', {
 						class: page.active ? 'active' : '',
 						onclick: e => {
 							offset = i*limit
 							model.select(offset, limit)
 						}
-					}, i+1) : undefined))) : undefined
+					}, i+1) : undefined))) : undefined)
 			])
 		}
 	}