Our Little Church DIY:
HTML5 CSS3 Tables

Sometimes it is nice to attach tables to a web page. At the same time, do not use table for defining the web page layout, as done prior to HTML5. Only use tables as a spread sheet, and use div to define the web page layout.

HTML Tables

If you are unfamilar with HTML tables, then please study HTML/CSS Tables.

Responsive HTML Tables using CSS

Responsive HTML Tables are done by using a horizontal scroll bar.


    <article style="overflow-x: auto" >

OR with HTML5 and CSS3, here is the HTML code.


    <article class="rTableArticle" >

AND a portion of the CSS file.


.rTableArticle {
    overflow-x: auto;
}

Here is the BODY portion of a web page. This is the HTML portion.


<body>
    <?php include 'view/header.php'; ?>
    <?php include 'view/nav.php'; ?>
    <div class="content">
    <article class="rTableArticle" >
        <h1>Ways to Give</h1>
        <div class="rTable">
            <div class="rTableRow">
                <div class="rTableHeading4">Tithely</div>
                <div class="rTableHeading4">Text</div>
                <div class="rTableHeading4">Envelope</div>
                <div class="rTableHeading4">Pushpay App</div>
            </div>
            <div class="rTableRow">
                <div class="rTableCell"><img class="giveImage1" 
                    src="images/Tithely_logo.png" alt="Give through Tithely" /><br />
                    Make an online contribution by clicking <a href="https://get.tithe.ly/" >HERE</a>.</div>
                <div class="rTableCell"><img class="giveImage1" 
                    src="images/cellPhone.png" alt="Text in your giving" /></div>
                <div class="rTableCell"><img class="giveImage1" 
                    src="images/Envelope.png" alt="Use church envelopes" /></div>
                <div class="rTableCell"><img class="giveImage1" 
                    src="images/Pushpay.png" alt="Give through Pushpay" /><br />
                    Make an online contribution by clicking <a href="https://pushpay.com/" >HERE</a>.</div>
            </div>
            <div class="rTableRow">
                <div class="rTableCell">Download the phone app and create an account.</div>
                <div class="rTableCell">Text “church initials” to 77977.</div>
                <div class="rTableCell">This is available from the ushers.</div>
                <div class="rTableCell">Download the phone app and create an account.</div>
            </div>
            <div class="rTableRow"> 
                <div class="rTableCell"></div>
                <div class="rTableCell"></div>
                <div class="rTableCell"></div>
                <div class="rTableCell">
                    <a href="https://itunes.apple.com/us/app/pushpay/id528999632?mt=8" >
                    <img class="giveImage2" alt="Acquire Pushpay through Apple Apps"
                        src="images/AppleApp.png" /></a>
                    <a href="https://play.google.com/store/apps/details?id=com.pushpay.android.pp&hl=en_US" >
                    <img class="giveImage2"  alt="Acquire Pushpay through Google Play"
                        src="images/GooglePlay.png" /></a></div>
            </div>
        </div>
    </article>
    </div>
    <?php include 'view/footer.php'; ?>
</body>

Reviewing the file:

Let us review the lines between the leading <head> and the closing </head>. The first line of the group is the "head.php" file, which we know is majority of the code for Head. The "head.php" file contains the link for the "main.css" file, which controls the responsiveness of the web pages. We do not recommend you touch the "main.css" file unless you understand HTML5 and CSS3.

The next line starts with <title> tag and is the associated <title>The <title> tag and <meta> tags use CONSTANTS, as we know in the programming world is normally done in ALL CAPITALIZATION. After you download the files, you will need to update the constants.

The <meta> tag (as you are aware) covers the description, keywords, viewport, and the author. As you remember, the Head contains the details such as the links for the CSS files, JavaScript files, Title tag, and Meta tags.