Table

Table top headers and caption

ready
<div class="ds-block">

    <div class="ds-table-wrapper">
        <table>
            <caption>Available scholarships <small>(this is a table caption)</small></caption>

            <thead>
                <tr>
                    <th>Scholarship details</th>
                    <th>Status</th>
                    <th>Amount</th>
                </tr>
            </thead>

            <tbody>
                <tr>
                    <td>
                        <h4>Accommodation Services Access Scholarship</h4>
                        <p>Albury-Wodonga, Melbourne, Bendigo, Business and Commerce, Arts and Communications, Sciences and Psychology, Teaching and Education, Law and Criminology, Health Sciences, IT and Engineering, Honours, 4th year undergraduates, Postgraduate coursework, Future undergraduates, 1st year undergraduates, 2nd year undergraduates, 3rd year undergraduates</p>
                    </td>

                    <td>Open</td>

                    <td>$3000</td>
                </tr>

                <tr>
                    <td>
                        <h4>La Trobe Access Scholarship</a></h4>

                        <p>Franklin Street, City, Bendigo, Albury-Wodonga, Shepparton, Mildura, Melbourne, Health Sciences, Business and Commerce, IT and Engineering, Law and Criminology, Teaching and Education, Arts and Communications, Sciences and Psychology, Future undergraduates</p>
                    </td>

                    <td>Open</td>

                    <td>$3000
                        <p>Amount Conditions</p>
                        <p>Maximum Available</p>
                    </td>
                </tr>

                <tr>
                    <td>
                        <h4>Accommodation Services Access Scholarship</h4>
                        <p>Albury-Wodonga, Melbourne, Bendigo, Business and Commerce, Arts and Communications, Sciences and Psychology, Teaching and Education, Law and Criminology, Health Sciences, IT and Engineering, Honours, 4th year undergraduates, Postgraduate coursework, Future undergraduates, 1st year undergraduates, 2nd year undergraduates, 3rd year undergraduates</p>
                    </td>

                    <td>Open</td>

                    <td>$3000</td>
                </tr>

                <tr>
                    <td>
                        <h4>La Trobe Access Scholarship</a></h4>

                        <p>Franklin Street, City, Bendigo, Albury-Wodonga, Shepparton, Mildura, Melbourne, Health Sciences, Business and Commerce, IT and Engineering, Law and Criminology, Teaching and Education, Arts and Communications, Sciences and Psychology, Future undergraduates</p>
                    </td>

                    <td>Open</td>

                    <td>$3000
                        <p>Amount Conditions</p>
                        <p>Maximum Available</p>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

</div>

Table top and left headers

ready
<div class="ds-block">

    <div class="ds-table-wrapper">
        <table>
            <tbody>
                <tr>
                    <th rowspan="2">Semester&nbsp;1</th>
                    <th><a href="https://www.latrobe.edu.au/students/your-course/subjects/current/arc1thj">ARC1THJ</a></th>
                    <th><a href="https://www.latrobe.edu.au/students/your-course/subjects/current/arc1wor">ARC1WOR</a></th>
                    <th>OPTION</th>
                    <th>OPTION</th>
                </tr>
                <tr>
                    <td>The Human Journey</td>
                    <td>World Archaeology</td>
                    <td>Level 1 University Elective</td>
                    <td>Level 1 University Elective</td>
                </tr>
                <tr>
                    <th rowspan="2">Semester&nbsp;2</th>
                    <th><a href="/students/your-course/subjects/2020/ARC1CIV">ARC1CIV</a></th>
                    <th>OPTION</th>
                    <th>OPTION</th>
                    <th>OPTION</th>
                </tr>
                <tr>
                    <td>Archaeology of Ancient Civilisations</td>
                    <td>Level 1 University Elective</td>
                    <td>Level 1 University Elective</td>
                    <td>
                        <p>Level 1 University Elective</p>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

</div>

Table compact

ready

modifier ds-table--compact

<div class="ds-block">

    <div class="ds-table-wrapper">
        <table class="ds-table--compact">
            <caption>Available scholarships</caption>

            <thead>
                <tr>
                    <th>Scholarship details</th>
                    <th>Status</th>
                </tr>
            </thead>

            <tbody>
                <tr>
                    <th>Date</th>
                    <td>20 May 2020</td>
                </tr>
                <tr>
                    <th>Venue</th>
                    <td>Online</td>
                </tr>
                <tr>
                    <th>Duration</th>
                    <td>Three weeks</td>
                </tr>
            </tbody>
        </table>
    </div>

</div>

Table striped (and compact)

ready

modifier ds-table--striped

<div class="ds-block">

    <div class="ds-table-wrapper">
        <table class="ds-table--compact ds-table--striped">
            <caption>Available scholarships</caption>

            <thead>
                <tr>
                    <th>Scholarship details</th>
                    <th>Status</th>
                </tr>
            </thead>

            <tbody>
                <tr>
                    <th>Date</th>
                    <td>20 May 2020</td>
                </tr>
                <tr>
                    <th>Venue</th>
                    <td>Online</td>
                </tr>
                <tr>
                    <th>Duration</th>
                    <td>Three weeks</td>
                </tr>
            </tbody>
        </table>
    </div>

</div>

Table unstyled

ready

modifier ds-table--unstyled

<div class="ds-block">

    <div class="ds-table-wrapper">
        <table class="ds-table--unstyled">
            <caption>Available scholarships</caption>

            <thead>
                <tr>
                    <th>Scholarship details</th>
                    <th>Status</th>
                </tr>
            </thead>

            <tbody>
                <tr>
                    <th>Date:</th>
                    <td>20 May 2020</td>
                </tr>
                <tr>
                    <th>Venue:</th>
                    <td>Online</td>
                </tr>
                <tr>
                    <th>Duration:</th>
                    <td>Three weeks</td>
                </tr>
            </tbody>
        </table>
    </div>

</div>

Table stacked on mobile

ready

Use modifer ds-table--stacked-on-mobile for a responsive table which will stack on viewporst 768px. Usefull for two column tables with th on left.

<div class="ds-block">

    <div class="ds-table-wrapper">
        <table class="ds-table ds-table--stacked-on-mobile">
            <tbody>
                <tr>
                    <th>Award</th>
                    <td>Bachelor of Psychological Science</td>
                </tr>

                <tr>
                    <th>ATAR range <br>(Melbourne campus)</th>
                    <td>
                        <p><b>55.00</b> - Lowest selection rank (including adjustment factors)</p>
                        <p><b>97.30</b> - Hghest ATAR offered (excluding adjustment factors)</p>
                        <div class="ds-alert ds-alert--info" role="alert">
                            <div class="ds-alert__icon">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                    fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                    stroke-linejoin="round" class="feather feather-info">
                                    <circle cx="12" cy="12" r="10"></circle>
                                    <line x1="12" y1="16" x2="12" y2="12"></line>
                                    <line x1="12" y1="8" x2="12" y2="8"></line>
                                </svg>
                            </div>

                            <div class="ds-alert__text">
                                <p>You may be able to boost your ATAR to give you the best possible chance of entry
                                    to this course depending on the subjects you've studied, and the marks you've
                                    attained. <a href="">Enter subjects and recalculate ATAR</a></p>
                            </div>
                        </div>
                    </td>
                </tr>

                <tr>
                    <th>Pathway programs for entry</th>
                    <td>
                        <p>Graduate Diploma in Psychological Science,<br> Certificate in Psychological Science</p>
                        <p><a class="ds-icon-chevrons-down" href="#pathways">View pathways</a></p>
                    </td>
                </tr>

                <tr>
                    <th>Start dates</th>
                    <td>
                        <p>Semester 1 (March 2021), Semester 2 (July 2021)</p>
                    </td>
                </tr>

                <tr>
                    <th>Duration</th>
                    <td>
                        <p></p>3 years full-time or part-time equivalent</p>
                    </td>
                </tr>

                <tr>
                    <th>Prerequisite</th>
                    <td>
                        <p></p>English (Please refer to <a href="#entry-requirements">admission requirements</a> for
                        details)</p>
                    </td>
                </tr>

                <tr>
                    <th>Fees and scholarships</th>
                    <td>
                        <p></p>Estimated cost per year if studying full time $6,684 (CSP).
                        Learn more about <a href="#fees-and-scholarships">Fees and scholarships</a>.</p>
                    </td>
                </tr>

                <tr>
                    <th>VTAC code</th>
                    <td>
                        <p>2100320551 (CSP)</p>
                    </td>
                </tr>
            </tbody>
            <tfoot>
                <tr class="ds-table__footnotes">
                    <td colspan="2">
                        <p><sup>*</sup>N/A: Students not accepted in this category, NC: New course, N/P: Not
                            published (includes categories with less than five students).</p>
                    </td>
                </tr>
            </tfoot>
        </table>
    </div>

</div>