Some example HTML for the busy web developer.
When I started building websites, I often looked for ready made blocks of code I can quickly customize and deploy. Often these would be Tables. I never really figured out how to write a table from scratch and have it layout the way I intend.
So here goes.
This is two rows and two columns. A square with four partitions. The letters represent where information is placed from left to right.
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
This is one row (or column).
<tr>
<td>A</td>
</tr>
</table>
This is four rows and fours columns, but with a twist. The top row is joined to make one.
<tr>
<td colspan=”4″>A+B+C+D</td>
</tr>
<tr>
<td>E</td>
<td>F</td>
<td>G</td>
<td>H</td>
</tr>
<tr>
<td>I</td>
<td>J</td>
<td>K</td>
<td>L</td>
</tr>
<tr>
<td>M</td>
<td>N</td>
<td>O</td>
<td>P</td>
</tr>
</table>
This is similar to the above, four rows and fours columns, but with this the first column or left most column is joined to make one.
<tr>
<td rowspan=”4″>A+E+I+M</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr>
<tr>
<td>F</td>
<td>G</td>
<td>H</td>
</tr>
<tr>
<td>J</td>
<td>K</td>
<td>L</td>
</tr>
<tr>
<td>N</td>
<td>O</td>
<td>P</td>
</tr>
</table>
Another set I find very useful is lists.
For un-ordered list
<li></li>
</ul>
For ordered list (numbered)
<li></li>
</ol>
I will leave you with something a little more advanced, a styled list box. This box will be styled locally for easy cut and past. But I would suggest moving the style into an external style sheet.
#listheading {height:25px;background:#eaeaea;padding:5px;border:1px solid #999;border-bottom:none; font:20px; font-weight:bold;border-bottom:1px solid #999;}
#listshell { width:225px;list-style:none;font:15px }
.thelist {padding-left:5px;border:1px solid #999; border-top:none}
</style>
<ul id=”listshell”>
<li id=”listheading”>My Great Heading</li>
<li class=”thelist”> > Item 1</li>
<li class=”thelist”> > Item 2</li>
<li class=”thelist”> > Item 3</li>
<li class=”thelist”> > Item 4</li>
<li class=”thelist”> > Item 5</li>
</ul>
Comments are closed.