Table with number column : td « Tags « HTML / CSS






Table with number column

    

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
        <head>
            <title>Hummus</title>
            <style type='text/css' media='all'>
                table {
                    border-width: 0px;
                    width: 500px;
                }
                th {
                    background: #ccc;
                    color: white;
                }
                tfoot td {
                    background: #808080;
                    color: white;
                }
            </style>
        </head>
        <body>
            <table>
                <thead>
                    <tr>
                        <th colspan='4'>
                            H
                        </th>
                    </tr>
                    <tr>
                        <th>
                            #
                        </th>
                        <th>
                            M
                        </th>
                        <th>
                            P
                        </th>
                        <th>
                            I
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>#</td>
                        <td>C</td>
                        <td>D</td>
                    </tr>
                    <tr>
                        <td>15</td>
                        <td>C</td>
                        <td colspan='2'>F</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>T</td>
                        <td colspan='2'>S</td>
                    </tr>
                    <tr>
                        <td>8</td>
                        <td>T</td>
                        <td colspan='2'>R</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>C</td>
                        <td colspan='2'>T</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>T</td>
                        <td>P</td>
                        <td>C</td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <td colspan='4'>
                             this is a test. 
                        </td>
                    </tr>
                </tfoot>
            </table>
      </body>
   </html>

   
    
    
  








Related examples in the same category

1.'td' Example
2.'choff' is a decimal number specifying an offset from the beginning of the table cell
3.'headers' specifies a list of 'th' elements
4.tr and td
5.Line break in a table cell
6.use table cell as block
7.Hide empty cell
8.Empty table header cell
9.Table cell hover
10.Right-offset Shrinkwrapped Table
11.Table with Spanned Rows and Cells
12.Boxed Table and Cells
13.td font-weight: bold;
14.table cell hover with class
15.td:empty
16.table cell overflow hidden
17.Selecting cells in body
18.Set style for an anchor in table cell
19.Set style for image in a table cell
20.Table cell with different class
21.Table cell with line height setting
22.Add different cell space
23.empty-cells: hide
24.td width:6em;
25.td overflow: hidden;
26.td font-size: 130%;
27.td color: #303030;
28.td font-size: 0.9em;
29.td line-height:1.5; line-height:1.5em; line-height:75%;}
30.Table with column span 2
31.css is for the table layout
32.rowspans and colspans merge the specified number of cells vertically or horizontally
33.Selecting cells in column
34.Column widths
35.Hiding column
36.col width: 200px;
37.col color: crimson;
38.Column highlight