HTML - attributes - colspan

revision:


Content

"colspan" attribute : defines the number of columns a table cell should span. syntax some examples


"colspan" attribute : defines the number of columns a table cell should span.

top

The colspan attribute can be used on the following elements: <td> and <th>. It allows the single table cell to span the width of more than one cell or column.


syntax

top

<td/th colspan="number">

number specifies the number of columns a cell should span. The number must be an integer. Note: colspan="0" tells the browser to span the cell to the last column of the column group (colgroup).


some examples

top
Monthly Savings
January $100
January $80
HTML codes:
                    <table>
                        <tr>
                        <th colspan="2">Monthly Savings</th>
                        </tr>
                        <tr>
                        <td>January</td>
                        <td>$100</td>
                        </tr>
                        <tr>
                        <td>January</td>
                        <td>$80</td>
                        </tr>
                    </table>
                    <style>
                        table, th, td {border: 1px solid black;}
                    </style>
                
Name Expense
Eddy $10
Hilde $8
Sum: $18
codes:
                    <table>
                        <tr>
                            <th>Name</th>
                            <th>Expense</th>
                        </tr>
                        <tr>
                            <td>Eddy</td>
                            <td>$10</td>
                        </tr>
                        <tr>
                            <td>Hilde</td>
                            <td>$8</td>
                        </tr>
                        <tr>
                        <td colspan="2">Sum: $18</td>
                        </tr>
                    </table>
                    <style>
                        table, th, td {border: 1px solid black; border-collapse: collapse; 
                            padding: 6px; text-align:center;}
                    </style>