HTML Tutorial

Table Col Span

The Table col Span is also known as the Spanning Colum.

Sometimes you might want the entries in a table to span across more than one column. The colspan attribute can be used on a <th> or <td> element and indicates how many columns that cell should run across. In the example on the right you can see a timetable with five columns; the first column contains the heading for that row (the day), and the remaining four represent one-hour time slots. If you look at the table cell that contains the words ‘Science’

Notice how in the span attribute of the element the value is 2, which means that the cell should span two columns. In the third row, ‘History’ spans across three columns.

Notice how in the second and third rows you see fewer <td> elements than there are columns. This is because when a cell spans across more than one column the <td> or <th> cells that would have otherwise taken the place of the wider cells aren’t in the code.

Example

Here’s an HTML table example demonstrating the use of the colspan attribute, where table cells span across multiple columns. This example represents a weekly timetable with some subjects spanning more than one column.

				
					<table border="1" cellpadding="10">
    <thead>
        <tr>
            <th>Day</th>
            <th>9:00 - 10:00</th>
            <th>10:00 - 11:00</th>
            <th>11:00 - 12:00</th>
            <th>12:00 - 1:00</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>Monday</th>
            <td>Math</td>
            <td>Science</td>
            <td colspan="2">English</td>
        </tr>
        <tr>
            <th>Tuesday</th>
            <td colspan="2">Science</td>
            <td>Math</td>
            <td>Physical Education</td>
        </tr>
        <tr>
            <th>Wednesday</th>
            <td>History</td>
            <td colspan="3">Geography</td>
        </tr>
        <tr>
            <th>Thursday</th>
            <td>Math</td>
            <td>History</td>
            <td>Science</td>
            <td>Art</td>
        </tr>
        <tr>
            <th>Friday</th>
            <td colspan="2">English</td>
            <td>History</td>
            <td>Geography</td>
        </tr>
    </tbody>
</table>

Explanation of the Table:

colspan: This attribute is used for extending a cell through various numbers of columns. For example, in the first row “English” spans two columns (colspan=’2′) and thus belongs to both the 11:00 -12:00 and 12:00 to 1:00 slot.
Row Entries: Fewer elements are needed in rows where a well actually stretches across multiple columns since the wide cells take up space that would otherwise be filled by as many regular cells.
An example of this is using the colspan attribute to have more dynamic table layouts and make it easier for you to organize data that occupies several columns.

Try It Yourself

<table border="1" cellpadding="10">
    <thead>
        <tr>
            <th>Day</th>
            <th>9:00 - 10:00</th>
            <th>10:00 - 11:00</th>
            <th>11:00 - 12:00</th>
            <th>12:00 - 1:00</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>Monday</th>
            <td>Math</td>
            <td>Science</td>
            <td colspan="2">English</td>
        </tr>
        <tr>
            <th>Tuesday</th>
            <td colspan="2">Science</td>
            <td>Math</td>
            <td>Physical Education</td>
        </tr>
        <tr>
            <th>Wednesday</th>
            <td>History</td>
            <td colspan="3">Geography</td>
        </tr>
        <tr>
            <th>Thursday</th>
            <td>Math</td>
            <td>History</td>
            <td>Science</td>
            <td>Art</td>
        </tr>
        <tr>
            <th>Friday</th>
            <td colspan="2">English</td>
            <td>History</td>
            <td>Geography</td>
        </tr>
    </tbody>
</table>

How to Create a...

The Ultimate Travel Companion:...

HTML Tutorial

Table Col Span

Example

Explanation of the Table:

Try It Yourself

Share with friends

Leave a comment Cancel reply

How to Create a Clone Website (Fake Website)

The Ultimate Travel Companion: Top 5 Must-Have Apps

HTML Tutorial

Table Col Span

Example

Explanation of the Table:

Try It Yourself

Share with friends

Leave a comment Cancel reply