CSS Construction Table

2. Basic construction of tables
4. Margin and Edge applications
6. Hide and delete apps
7. Simple Table

   Table {

   ???? Width:auto;

   ???? Border-collapse:collapse; (merge the cell spaces together)

   ???? margin-left:20px;

   ???? BORDER:1PX solid black;

   }

   td,th {

   ???? width:50px;

   ???? BORDER:1PX solid black;

   ???? padding:5px;

   ???? Background:gold;

   ???? Text-align:center;

   ???? Vertical-align:middle;

   ???? text-indent:5px;

   }

   ?

   <table>

   ???? <tr><th>1</th><th>2</th><th>3</th><th>4</th><th>5 </th><th>6</th></tr>

   ???? <tr><th>7</th><td>8</td><td>9</td><td>10</td><td> 11</td><td>12</td></tr>

   </table>

   ?

   <table>

   ???? <tr><th rowspan= "2" >1</th><th colspan= "2" >2</th></tr>

   ???? <tr><td>8</td><td>9</td><td>10</td><td>11</td><td> 12</td></tr>

   </table>

   ?

8. row groups and column groups

   Table.example1 Thead {

   ???? Background:orange;

   ???? Color:black;

   }

   Table.example1 Tbody {

   ???? Background:gold;

   ???? Color:black;

   }

   Table.example1 Tfoot {

   ???? Background:firebrick;

   ???? Color:white;

   }

   ?

   *.col1 {

   ???? Background:wheat;

   }

   *.col2 {

   ???? Background:gold;

   }

   *.col3 {

   ???? Background:orange;

   }

   *.COL4 {

   ???? Background:tomato;

   }

   *.COL5 {

   ???? Background:firebrick;

   }

   *.col6 {

   ???? Background:black;

   ???? Color:white;

   }

   ?

   <table class= "Example1" >

   ???? <thead>

   ???????? <tr><th>1</th><th>2</th><th>3</th><th>4</th><th>5 </th><th>6</th></tr>

   ???? </thead>

   ???? <tbody>

   ???????? <tr><th>7</th><td>8</td><td>9</td><td>10</td><td> 11</td><td>12</td></tr>

   ???? </tbody>

   ???? <tfoot>

   ???????? ???? <tr><th>13</th><td>14</td><td>15</td><td>16</td><td >17</td><td>18</td></tr>

   </tfoot>

   </table>

   ?

   <table>

   ???? <colgroup>

   ???????? <col class= "Col1"/>

   ???????? <col class= "col2"/>

   ???????? <col class= "Col3"/>

   ???????? <col class= "Col4"/>

   ???????? <col class= "Col5"/>

   ???????? <col class= "Col6"/>

   ???? </colgroup>

   ???? <tr><th rowspan= "2" >1</th><th colspan= "2" >2</th></tr>

   ???? <tr><td>8</td><td>9</td><td>10</td><td>11</td><td> 12</td></tr>

   </table>

   ?

9. Table Selector

   <table class= "Example1" >

   ???? <thead>

   ???????? <tr>

   <th class= "T1" >1</th>

   <th class= "T2" >2</th>

   <th>3</th>

   <th>4</th>

   <th>5</th>

   <th>6</th>

   </tr>

   ???? </thead>

   ???? <tbody>

   ???????? <tr><th>7</th><td>8</td><td>9</td><td>10</td><td> 11</td><td>12</td></tr>

   ???? </tbody>

   ???? <tfoot>

   ???????? ???? <tr><th>13</th><td>14</td><td>15</td><td>16</td><td >17</td><td>18</td></tr>

   </tfoot>

   </table>

   ?

10. Delimited border

    Table {

    ???? Border-collapse:separate;

    }

    ?

    td,th {

    ???? width:50px;

    ???? padding:5px;

    ???? Text-align:center;

    ???? Vertical-align:middle;

    ???? Background:gold;

    ???? text-indent:5px;

    }

    ?

    . boxed-table {

    ???? BORDER:1PX solid black;

    }

    ?

    . boxed-cells TD {

    ???? BORDER:1PX solid black;

    }

    ?

    . boxed-cells Td.x {

    ???? Border:none;

    }

    ?

    Encapsulated Table

    <table class= "boxed-table" cellspacing= "5" >

    ???? <TR><TD rowspan= "2" >1</td><td colspan= "2" >2-3</tr>

    ???? <tr><td>7</td><td>8</td><td> </td><td>&nbsp;</td>< TD class= "X" >11</td></tr>

    </table>

    ?

    ?

    encapsulated Cells

    <table class= "Boxed-cells" cellspacing= "5" >

    ???? <TR><TD rowspan= "2" >1</td><td colspan= "2" >2-3</tr>

    ???? <tr><td>7</td><td>8</td><td> </td><td>&nbsp;</td>< TD class= "X" >11</td></tr>

    </table>

    ?

    encapsulated cells and tables

    <table class= "boxed-table boxed-cells" cellspacing= "5" >

    ???? <TR><TD rowspan= "2" >1</td><td colspan= "2" >2-3</tr>

    ???? <tr><td>7</td><td>8</td><td> </td><td>&nbsp;</td>< TD class= "X" >11</td></tr>

    </table>

    ?

    ?

11. Duplicate Border

    Table {

    ???? Border-collapse:collapse;

    }

    ?

    td,th {

    ???? width:50px;

    ???? padding:5px;

    ???? Text-align:center;

    ???? Vertical-align:middle;

    ???? Background:gold;

    ???? text-indent:5px;

    }

    ?

    . boxed-table {

    ???? BORDER:1PX solid black;

    }

    ?

    . boxed-cells TD {

    ???? BORDER:1PX solid black;

    }

    ?

    . boxed-cells Td.x {

    ???? Border:none;

    }

    ?

    Encapsulated Table

    <table class= "boxed-table" cellspacing= "0" >

    ???? <TR><TD rowspan= "2" >1</td><td colspan= "2" >2-3</tr>

    ???? <tr><td>7</td><td>8</td><td> </td><td>&nbsp;</td>< TD class= "X" >11</td></tr>

    </table>

    ?

    encapsulated Cells

    <table class= "boxed-cells" cellspacing= "0" >

    ???? <TR><TD rowspan= "2" >1</td><td colspan= "2" >2-3</tr>

    ???? <tr><td>7</td><td>8</td><td> </td><td>&nbsp;</td>< TD class= "X" >11</td></tr>

    </table>

    ?

    encapsulated cells and tables

    <table class= "boxed-table boxed-cells" cellspacing= "0" >

    ???? <TR><TD rowspan= "2" >1</td><td colspan= "2" >2-3</tr>

    ???? <tr><td>7</td><td>8</td><td> </td><td>&nbsp;</td>< TD class= "X" >11</td></tr>

    </table>

    ?

    ?

12. Hide and delete cells, rows, columns

    Table {

    ???? Border-collapse:separate;

    }

    td,th {

    ???? width:50px;

    ???? padding:5px;

    ???? Text-align:center;

    ???? Vertical-align:middle;

    ???? Background:gold;

    ???? text-indent:5px;

    ???? BORDER:1PX solid black;

    }

    ?

    . Hidden {

    ???? Visibility:hidden;

    }

    ?

    . Delete {

    ???? Display:none;

    }

    ?

    <table>

    <colgroup>

    <col class= "hidden Delete"/>

    </colgroup>

    ???? <TR><TD class= "Delete" >1</td><td>2</td><td>3</td><td>4</td ></tr>

    ???? <tr>

    <TD class= "hidden" >5</td>

    <TD class= "hidden" >6</td>

    <td>7</td>

    <td>8</td>

    </tr>

    </table>

    ?

14. Align data vertically

    . x {

    ???? Vertical-align:middle;

    }

    ?

    8. table Color replacement when hovering the mouse

    Table th:hover{

    ???? Background:green;

    }

    ?

    Table td:hover{

    ???? Background:blue;

    }

CSS Construction Table