Pro HTML5 and CSS3 Design Patterns

(avery) #1

CHAPTER 15 ■ TABLES


Table


HTML


<h1>Table</h1>

<h2>Simple Table</h2>
<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>

<h2>Table with Spanned Rows and Cells</h2>
<table>
<tr> <td rowspan="2">1</td> <td colspan="5">2-6</td> </tr>
<tr> <td>8</td> <td>9</td> <td> </td> <td> </td> <td>12</td> </tr>
</table>

CSS


table { width:auto; height:1px; table-layout:auto; border-collapse:collapse;
margin-left:20px; border:1px solid black; }

td, th { width:50px; height:1px; overflow:hidden; visibility:visible;
border:1px solid black; padding:5px; background:gold;
text-align:center; vertical-align:middle; text-indent:5px; }
Free download pdf