CODEWITHSUNDEEP
htmlcsshtml-table
Anish Krishnan
Anish Krishnan

Reputation: 63

Table rowspan and colspan

I need a table like this: enter image description here

Did the following: HTML file [only code for table]

<table border="1" cellpadding="8" cellspacing="0">
    <tr>
        <th rowspan="3">Subject code and Subject Name</th>
        <th colspan="2" rowspan="2">Internal Assessment</th>
        <th colspan="2" rowspan="2">External Assessment</th>
        <th colspan="2">Grand Total</th>
        <th rowspan="3">Remarks</th>
    </tr>
    <tr>
        <th rowspan="2">MM</th>
        <th rowspan="2">MO</th>
        <td></td>
    </tr>
    <tr>
        <th>MM</th>
        <th>MO</th>
        <th>MM</th>
        <th>MO</th>
    </tr>      
    <tr>
        <td class="subject">Economics Theory</td>
        <td class="total">40</td>
        <td class="obtained">32</td>
        <td class="total">60</td>
        <td class="obtained">43</td>
        <td class="total">100</td>
        <td class="obtained">75</td>
        <td>P</td>
    </tr>
    <tr>
        <td class="subject">Elemetns of Statistics</td>
        <td>40</td>
        <td>31</td>
        <td>60</td>
        <td>38</td>
        <td>100</td>
        <td>69</td>
        <td>P</td>
    </tr>
    <tr>
        <td class="subject">Company Law</td>
        <td>40</td>
        <td>32</td>
        <td>60</td>
        <td>47</td>
        <td>100</td>
        <td>79</td>
        <td>P</td>
    </tr>
    <tr>
        <td class="subject">Money, Banking, Financial Management</td>
        <td>40</td>
        <td>31</td>
        <td>60</td>
        <td>36</td>
        <td>100</td>
        <td>67</td>
        <td>P</td>
    </tr>
    <tr>
        <td class="subject">Elements of Coding</td>
        <td>40</td>
        <td>32</td>
        <td>60</td>
        <td>47</td>
        <td>100</td>
        <td>79</td>
        <td>P</td>
    </tr>
</table>

But I got something like this from the above code: need to remove highlighted part. enter image description here

But when trying to remove the additional <td></td> from second <tr></tr> I get something like this, which is completely different from the expected result. enter image description here

CSS file

table {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.subject {
    text-align: left;
    padding-left: 10px;
    padding-right: 95px;
}

.second {
    width: 20%;
}

.total {
    padding-left: 30px;
    padding-right: 30px;
}

.obtained {
    padding-left: 50px;
    padding-right: 50px;
}

Upvotes: 3

Views: 2908

Answers (3)

U20
U20

Reputation: 36

Maybe I'm late,
but I have a trick to achieve the same look,
Just make the border of the unwanted cell invisible and set the cell width to 0

Here is how I have done it,

    <table border="1" style="border-collapse:collapse; border:none; border-color:black" width="100%" height="30%" cellpadding="8px" align="center">
        <tr height="50px">
            <th rowspan="3">Subject code and Subject Name</th>
            <th colspan="2" rowspan="2">Internal Assessment</th>
            <th colspan="2" rowspan="2">External Assessment</th>
            <th colspan="2">Grand Total</th>
            <th rowspan="3">Remarks</th>
        </tr>
        <tr>
            <th rowspan="2">MM</th>
            <th rowspan="2">MO</th>
<!--cover up the unwanted cell-->
            <td style="padding: 0;padding-top: 18px;border: none;width: 0;"></td>

        </tr>
        <tr>
            <th>MM</th>
            <th>MO</th>
            <th>MM</th>
            <th>MO</th>
        </tr>
        <tr>
            <td>Economics Theory</td>
            <td>40</td>
            <td>32</td>
            <td>60</td>
            <td>43</td>
            <td>100</td>
            <td>75</td>
            <td>P</td>
        </tr>
        <tr>
            <td>Elements of Statistics</td>
            <td>40</td>
            <td>31</td>
            <td>60</td>
            <td>38</td>
            <td>100</td>
            <td>69</td>
            <td>P</td>
        </tr>
        <tr>
            <td>Company Law</td>
            <td>40</td>
            <td>32</td>
            <td>60</td>
            <td>47</td>
            <td>100</td>
            <td>79</td>
            <td>P</td>
        </tr>
        <tr>
            <td>Money, Banking, Financial Management</td>
            <td>40</td>
            <td>31</td>
            <td>60</td>
            <td>36</td>
            <td>100</td>
            <td>67</td>
            <td>P</td>
        </tr>
        <tr>
            <td>Elements of Coding</td>
            <td>40</td>
            <td>32</td>
            <td>60</td>
            <td>47</td>
            <td>100</td>
            <td>79</td>
            <td>P</td>
        </tr>
    </table>

Upvotes: 0

AdityaDees
AdityaDees

Reputation: 1037

I think this should be beter

<table border="1" cellpadding="8" cellspacing="0">
    <tbody>
        <tr>
            <td rowspan="2">Subject code and Subject Name</td>
            <td colspan="2">Internal Assessment</td>
            <td colspan="2">External Assessment</td>
            <td colspan="2">Grand Total</td>
            <td rowspan="2">Remarks</td>
        </tr>
        <tr>
            <td>MM</td>
            <td>MO</td>
            <td>MM</td>
            <td>MO</td>
            <td>MM</td>
            <td>MO</td>
        </tr>
        <tr>
            <td class="subject">Economics Theory</td>
            <td class="total">40</td>
            <td class="obtained">32</td>
            <td class="total">60</td>
            <td class="obtained">43</td>
            <td class="total">100</td>
            <td class="obtained">75</td>
            <td>P</td>
        </tr>
        <tr>
            <td class="subject">Elemetns of Statistics</td>
            <td>40</td>
            <td>31</td>
            <td>60</td>
            <td>38</td>
            <td>100</td>
            <td>69</td>
            <td>P</td>
        </tr>
        <tr>
            <td class="subject">Company Law</td>
            <td>40</td>
            <td>32</td>
            <td>60</td>
            <td>47</td>
            <td>100</td>
            <td>79</td>
            <td>P</td>
        </tr>
        <tr>
            <td class="subject">Money, Banking, Financial Management</td>
            <td>40</td>
            <td>31</td>
            <td>60</td>
            <td>36</td>
            <td>100</td>
            <td>67</td>
            <td>P</td>
        </tr>
        <tr>
            <td class="subject">Elements of Coding</td>
            <td>40</td>
            <td>32</td>
            <td>60</td>
            <td>47</td>
            <td>100</td>
            <td>79</td>
            <td>P</td>
        </tr>
    </tbody>
</table>

Upvotes: -1

TARN4T1ON
TARN4T1ON

Reputation: 522

"completely different"? The table is functionally the same; the only discernible (and hardly at that) difference is the change in height between the "Grand Total" and other headings.

Anyway, I was able to get it looking extremely similar by adding vertical padding to the "Subject code and Subject Name" heading. You could also add it to the "Remarks" heading. Really any element that spans the two rows.

padding-top: 35px;
padding-bottom: 35px;

seems to be nearly identical to what you want it to look like.

As an aside, I bet you'd get something like this working a lot easier by using modern CSS grids instead of tables. Tables are just kinda nasty to work with in general, as should be evident by even this solution.

Upvotes: 3

Related Questions