Skip to main content

Cycle Result

Cycle-result represents the total marks scored by the student. Here the total marks of both the table is calculated in the respective column and then the average of the total marks is calculated and presented to students.

Cycle Result Table​

We have used HTML for this component.

Breakdown of the code is as follows:

Column Header​

  1. <th> : We have used <th> tag to define the column headers for the table, which are "Cycle", "TK", "TD", "LI", "B", "C", and "Total".

  2. We have used class attribute to apply CSS to the cells.

    index.html
    <thead>
            <tr>
                <th>Cycle</th>
                <th class="d">TK</th>
                <th class="d">TD</th>
                <th class="d">LI</th>
                <th class="d">B</th>
                <th class="d">C</th>
                <th class="d">Total</th>
            </tr>
    </thead>

Data Column​

  1. <tr> : We have used <tr> element to define a row in an HTML table.

  2. <th> : We have used <th> tag to define the column header ie "1 to 5" on line 2.

  3. <td> : We have used <td> tag to define the remaining cells. These rows are used as template for adding actual data to the table.

    index.html
    <tr>
        <th>1 to 5</th>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
tip

Similarly we have implemented next column: Total and Average column.

  1. Cycle Result Table would look like in the following manner:


After successfully implementing the Cycle Result component of the Fill my cycle website, the next step we did was to move forward with the implementation of Instructions Button component.