Table Practice


by Jeremy Caudle
code

It has been quite some time since I worked with tables in HTML, so I thought I’d get some practice in today. I’ve never made use of the caption element and I did not know about the caption-side property in CSS either. It’s always nice to learn new things about older elements and how I can style them via CSS. Note to self: I need to learn more about making responsive tables.

Weekly schedule for Barry's Barnacle Broiler
Monday Tuesday Wednesday Thursday Friday Saturday Sunday
0800–1200 Mark Mark Mark Mark Mark Alex Alex
1200–1600 Alex Alex Alex Alex Beth Beth Beth
1600–2000 Beth Beth Mark Mark Alex Alex Alex

View the code:

HTML and JS 
<div class="code-block">
            
            <table>
                <caption>Weekly schedule for Barry's Barnacle Broiler</caption><!-- <caption> Must be placed after initial table element -->
                    <tr>
                        <td></td>
                        <th scope="col">Monday</td>
                        <th scope="col">Tuesday</td>
                        <th scope="col">Wednesday</td>
                        <th scope="col">Thursday</td>
                        <th scope="col">Friday</td>
                        <th scope="col">Saturday</td>
                        <th scope="col">Sunday</td>
                    </tr>
                    <tr>
                        <th scope="row">0800–1200</th>
                        <td class="label-mark">Mark</td>
                        <td class="label-mark">Mark</td>
                        <td class="label-mark">Mark</td>
                        <td class="label-mark">Mark</td>
                        <td class="label-mark">Mark</td>
                        <td class="label-alex">Alex</td>
                        <td class="label-alex">Alex</td>
                    </tr>
                    <tr>
                        <th scope="row">1200–1600</th>
                        <td class="label-alex">Alex</td>
                        <td class="label-alex">Alex</td>
                        <td class="label-alex">Alex</td>
                        <td class="label-alex">Alex</td>
                        <td class="label-beth">Beth</td>
                        <td class="label-beth">Beth</td>
                        <td class="label-beth">Beth</td>
                    </tr>
                    <tr>
                        <th scope="row">1600–2000</th>
                        <td class="label-beth">Beth</td>
                        <td class="label-beth">Beth</td>
                        <td class="label-mark">Mark</td>
                        <td class="label-mark">Mark</td>
                        <td class="label-alex">Alex</td>
                        <td class="label-alex">Alex</td>
                        <td class="label-alex">Alex</td>
                    </tr>
            </table>
   

        </div>
CSS 
.code-block {
                max-width: 60em;
                margin: 2rem auto;
                font-family: Helvetica, Arial, sans-serif;
                padding: 1rem;
            }

            .code-block table {
                background-color: #dedede;
                padding: 1rem;
                text-align: center;
                margin: auto;
                border: none;
                border-collapse: collapse;
            }

            .code-block table caption {
                caption-side: top;
                margin: 1rem auto;
                color: rgb(219, 219, 219);
                background-color: rgb(18, 18, 116);
                vertical-align: middle;
                text-align: center;
                padding: 1rem;
                width: 66%;
                border-radius: .25rem;
            }

            .code-block table th[scope="col"] {
                padding: 1rem;
            }

            .code-block table th, td, tr {
                padding: 1rem;
            }

            .code-block table tr:nth-of-type(even) {
                background-color: #eee;
            }

            .label-alex {
                background-color: rgba(0, 0, 255, 0.33);
            }

            .label-beth {
                background-color: rgba(255, 0, 0, 0.33);
            }

            .label-mark {
                background-color: rgba(255, 255, 0, 0.33);
            }

Tags