显示大学课程并将标题设为粗体

Question

我试图将课程标题加粗但没有成功。即使我尝试使用 id 也没有成功font-weight:bold;。最后，这是展示大学课程的好方法吗？我稍后必须从数据库中检索数据，到目前为止，使用模拟数据生成表格就很好，但我不太熟悉在前端显示。

<div class="classes_wrapper">

        <div class="classes_wrapper_title"><h4>COURSES I AM TAKING</h4></div>

        <div id="my_classes">

            <table class="classes">

                <tr id="course_title">

                    <td><h4>Cal & Analytic Geometry</h4></td>

                </tr>

                <tr id="course_info">

                    <td><h5>MA 2330/ Section 001</h5></td>

                </tr>

                <tr id="time_frame">

                    <td><h5>August 31, 2020 - December 22, 2020</h5></td>

                </tr>

                <tr id="course_time">

                    <td><h5>Tue,Thu 01:00PM - 02:30PM</h5></td>

                </tr>

                <tr id="course_setting">

                    <td><h5>REMOTE</h5></td>

                </tr>

            </table>

        </div>

    </div>

Answer 1

这是一种方法。我注意到你的所有课程都已经在<h5>标签内，所以它们已经是粗体了。我删除了这些标签，并tds使用此 css 将代码中的所有内容设为粗体：td {font-weight: bold;}最后，如何显示数据取决于您。当您稍后从数据库中检索数据时，您将必须使用一些不属于 HTML 一部分的编程。td {font-weight: bold;}<div class="classes_wrapper">&nbsp; &nbsp; &nbsp; &nbsp; <div class="classes_wrapper_title"><h4>COURSES I AM TAKING</h4></div>&nbsp; &nbsp; &nbsp; &nbsp; <div id="my_classes">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <table class="classes">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr id="course_title">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>Cal & Analytic Geometry</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr id="course_info">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>MA 2330/ Section 001</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr id="time_frame">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>August 31, 2020 - December 22, 2020</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr id="course_time">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>Tue,Thu 01:00PM - 02:30PM</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr id="course_setting">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>REMOTE</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </table>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>

Answer 2

<div class="classes_wrapper">&nbsp; &nbsp; &nbsp; &nbsp; <div class="classes_wrapper_title"><h4>COURSES I AM TAKING</h4></div>&nbsp; &nbsp; &nbsp; &nbsp; <div id="my_classes">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <table class="classes">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr id="course_title">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>Cal & Analytic Geometry</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr id="course_info">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>MA 2330/ Section 001</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr id="time_frame">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>August 31, 2020 - December 22, 2020</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr id="course_time">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>Tue,Thu 01:00PM - 02:30PM</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr id="course_setting">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>REMOTE</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </table>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>and&nbsp;td {font-weight: bold;}