dont use table page layout.

src/common/AppRoot.tsx

@@ -71,14 +71,10 @@ class AppRoot extends Component<Props, State> {
                     <title>{Functions.siteTitle(lang)} - {Functions.siteSlogan(lang)}</title>
                 </Helmet>
                 <Header lang={lang} />
-                <table className="main">
-                    <tbody>
-                        <tr>
-                            <LeftColumn lang={lang} />
-                            <CenterColumn lang={lang} />
-                        </tr>
-                    </tbody>
-                </table>
+                <div id="main" className="clearfix">
+                    <LeftColumn lang={lang} />
+                    <CenterColumn lang={lang} />
+                </div>
             </>
         );
     }

src/common/CenterColumn.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
 import { Route, Switch } from 'react-router-dom';
 import { MultiLang } from '../config';
-import VisiomeTop10Items from '../custom/blocks/VisiomeTop10Items';
+import VisiomeLinks from '../custom/blocks/VisiomeLinks';
 import VisiomeNewItems from '../custom/blocks/VisiomeNewItems';
-import Announce from './blocks/Announce';
-import MainContent from './MainContent';
-import Footer from './Footer';
 import VisiomePreviewList from '../custom/blocks/VisiomePreviewList';
-import VisiomeLinks from './blocks/VisiomeLinks';
+import VisiomeTop10Items from '../custom/blocks/VisiomeTop10Items';
+import Announce from '../custom/blocks/Welcome';
+import Footer from './Footer';
+import MainContent from './MainContent';
 
 interface Props {
     lang: MultiLang;
@@ -16,65 +16,63 @@ interface Props {
 const CenterBlocks = (props: Props) => {
     const { lang } = props;
     return (
-        <table className="block">
-            <tbody>
-                <tr>
-                    <td id="centerLcolumn">
-                    </td>
-                    <td id="centerRcolumn">
-                    </td>
-                </tr>
-                <tr>
-                    <td colSpan={2} id="centerCcolumn">
-                        <div className="block">
-                            <div className="blockTitle">Welcome to Visiome Platform !</div>
-                            <div className="blockContent">
-                                <Announce lang={lang} />
-                            </div>
-                        </div>
-                        <div className="block">
-                            <div className="blockTitle">New Items</div>
-                            <div className="blockContent">
-                                <VisiomeNewItems lang={lang} />
-                            </div>
-                        </div>
-                        <div className="block">
-                            <div className="blockTitle">Top 10 Items</div>
-                            <div className="blockContent">
-                                <VisiomeTop10Items lang={lang} />
-                            </div>
-                        </div>
-                        <div className="block">
-                            <div className="blockTitle">Recommendations</div>
-                            <div className="blockContent">
-                                <VisiomePreviewList lang={lang} number={5} itemIds={[6894, 3315, 5915, 6434, 6105]} />
-                            </div>
-                        </div>
-                        <div className="block">
-                            <div className="blockTitle">Links</div>
-                            <div className="blockContent">
-                                <VisiomeLinks lang={lang} />
-                            </div>
-                        </div>
-                    </td>
-                </tr>
-            </tbody>
-        </table>
+        <div className="block">
+            <div className="clearfix">
+                <td className="centerLcolumn">
+                </td>
+                <td className="centerRcolumn">
+                </td>
+            </div>
+            <div className="centerCcolumn">
+                <div className="block">
+                    <div className="blockTitle">Welcome to Visiome Platform !</div>
+                    <div className="blockContent">
+                        <Announce lang={lang} />
+                    </div>
+                </div>
+                <div className="block">
+                    <div className="blockTitle">New Items</div>
+                    <div className="blockContent">
+                        <VisiomeNewItems lang={lang} />
+                    </div>
+                </div>
+                <div className="block">
+                    <div className="blockTitle">Top 10 Items</div>
+                    <div className="blockContent">
+                        <VisiomeTop10Items lang={lang} />
+                    </div>
+                </div>
+                <div className="block">
+                    <div className="blockTitle">Recommendations</div>
+                    <div className="blockContent">
+                        <VisiomePreviewList lang={lang} number={5} itemIds={[6894, 3315, 5915, 6434, 6105]} />
+                    </div>
+                </div>
+                <div className="block">
+                    <div className="blockTitle">Links</div>
+                    <div className="blockContent">
+                        <VisiomeLinks lang={lang} />
+                    </div>
+                </div>
+            </div>
+        </div>
     );
 }
 
 const CenterColumn = (props: Props) => {
     const { lang } = props;
     return (
-        <td id="centercolumn">
+        <div className="centercolumn">
             <Switch>
                 <Route exact path="/" render={() => <CenterBlocks lang={lang} />} />
             </Switch>
-            <MainContent lang={lang} />
+            <div className="block">
+                <MainContent lang={lang} />
+            </div>
             <div className="block">
                 <Footer lang={lang} />
             </div>
-        </td>
+        </div>
     );
 }
 

src/common/Header.tsx

@@ -33,7 +33,7 @@ const Header = (props: Props) => {
     return (
         <header className="header_bar clearfix">
             <div className="logo">
-                <Link to={urlHome}><img src={imageHeaderLeft} alt={Functions.siteTitle(lang)} /></Link>
+                <img src={imageHeaderLeft} alt={Functions.siteTitle(lang)} useMap="#logo" />
             </div>
             <div className="menu_bar clearfix">
                 <div className="menu_img">
@@ -56,6 +56,7 @@ const Header = (props: Props) => {
                     <LangFlag lang="en" /> <LangFlag lang="ja" />
                 </div>
             </div>
+            <map name="logo"><area shape="rect" coords="13,20,191,54" title={titleHome} alt={titleHome} href={urlHome} onClick={(e) => { onClickMap(e, urlHome); }} /></map>
             <map name="home"><area shape="circle" coords="37,63,17" title={titleHome} alt={titleHome} href={urlHome} onClick={(e) => { onClickMap(e, urlHome); }} /></map>
             <map name="help"><area shape="circle" coords="37,63,17" title={titleHelp} alt={titleHelp} href={urlHelp} onClick={(e) => { onClickMap(e, urlHelp); }} /></map>
             <map name="contact"><area shape="circle" coords="37,63,17" title={titleContact} alt={titleContact} href={urlContact} onClick={(e) => { onClickMap(e, urlContact); }} /></map>

src/common/LeftColumn.tsx

@@ -19,7 +19,7 @@ const LeftColumn = (props: Props) => {
         siteInfo: Functions.mlang('[en]Site Information[/en][ja]サイト情報[/ja]', lang),
     };
     return (
-        <td id="leftcolumn">
+        <div className="leftcolumn">
             <div className="block">
                 <div className="blockTitle">{titles.selectLang}</div>
                 <div className="blockContent">
@@ -44,7 +44,7 @@ const LeftColumn = (props: Props) => {
                     <CreditsMenu lang={lang} />
                 </div>
             </div>
-        </td>
+        </div>
     );
 }
 

src/common/MainContent.tsx

@@ -4,10 +4,10 @@ import Config, { MultiLang } from '../config';
 import Credits from '../credits/Credits';
 import CreditsXoopsPathRedirect from '../credits/CreditsXoopsPathRedirect';
 import Database from '../database/Database';
+import DatabaseXoopsPathRedirect from '../database/DatabaseXoopsPathRedirect';
 import Pico from '../pico/Pico';
 import PicoXoopsPathRedirect from '../pico/PicoXoopsPathRedirect';
 import XoopsPathRedirect from './XoopsPathRedirect';
-import DatabaseXoopsPathRedirect from '../database/DatabaseXoopsPathRedirect';
 
 interface Props {
     lang: MultiLang;

src/custom/blocks/VisiomeLinks.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
+import bannerJapanNode from '../../common/assets/theme/images/banner_incf-japan-node.gif';
+import bannerNIF from '../../common/assets/theme/images/banner_nif.gif';
+import bannerCBS from '../../common/assets/theme/images/banner_riken-cbs.gif';
+import bannerXooNIps from '../../common/assets/theme/images/banner_xoonips.gif';
+import LinkImage from "../../common/lib/LinkImage";
 import { MultiLang } from "../../config";
 import Functions from "../../functions";
-import bannerJapanNode from '../assets/theme/images/banner_incf-japan-node.gif';
-import bannerNIF from '../assets/theme/images/banner_nif.gif';
-import bannerCBS from '../assets/theme/images/banner_riken-cbs.gif';
-import bannerXooNIps from '../assets/theme/images/banner_xoonips.gif';
-import LinkImage from "../lib/LinkImage";
 
 interface Props {
     lang: MultiLang;

src/custom/blocks/Welcome.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
+import NoticeSiteHasBeenArchived from '../../common/lib/NoticeSiteHasBeenArchived';
 import { MultiLang } from '../../config';
-import NoticeSiteHasBeenArchived from '../lib/NoticeSiteHasBeenArchived';
 
 interface Props {
     lang: MultiLang;
 }
 
-const Annuonce = (props: Props) => {
+const Welcome = (props: Props) => {
     const { lang } = props;
     const announce = {
         'en':
@@ -34,4 +34,4 @@ const Annuonce = (props: Props) => {
     );
 }
 
-export default Annuonce;
+export default Welcome;