HTML for Simple Website Customization

Some HTML knowledge I implement on my blog to manipulate the webpage as I need…

---

 Tables

The Code for a 3×3 Table:

<table>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</tbody>
</table>

Demonstration of 3×3 table:

1	2	3
4	5	6
7	8	9

Table is a container, like div. A subset of table is tbody, which is table body. Other subsets include the header & footer. You can interpret these subsets as containers in a container. Tr stands for a row for the table and td refers to the cell. How many cells you want in a row is decided by how many td tags there are inside a tr tag. Note that the biggest number of td tags inside a tr tag decides how many columns exist for the table. And how many rows there are in a table is decided by how many tr tags are inside a table or tbody tag.

Making Two Columns

Div is a container. You can set the style or attributes of the div with style. The attributes that I used is width at 49% of page width, to insure that empty space is left in the middle between the two column. One column is floated to the left, the other column is floated to the right. The first part of the content goes on the left, second on right since we read left to right.

<div style="width: 49%; float: left;">content</div>
<div style="width: 49%; float: right;">content</div>

Or if the formatting of the text padding or bottom-margins are off you can achieve the same affect by changing the div to p:

<p style="width: 49%; float: left;">content</p>
<p style="width: 49%; float: right;">content</p>

Finally, note that if you go back to a single column style beneath a 2 column, the text of the single column will slide into the space left if the 2 columns are of unequal amounts.

To fix this, wrap these tags to the single column:

<div style=”clear:both;”>content</div>

Making Three Columns

For making 3 columns, use the following format:

<div style="width:30%;padding:0 10pt 0 0;float:left;">
content
</div>

<div style="width:30%;padding:0 10pt 0 0;float:left;">
content
</div>

<div style="width:30%;padding:0 10pt 0 0;float:right;">
content
</div>

Finally, note that if you go back to a single column style beneath a 3 column, the text of the single column will slide into the space left if the 3 columns are of unequal amounts.

To fix this, wrap these tags to the single column:

<div style=”clear:both;”></div>

Bookmarking

Target text code:

<span id="Target">Target</span>

Link code:

<a href="https://www.therevisionist.org/programming/html/#Target">end</a>

Example: Tables

Highlighting

<mark>content</mark>

You place the content between the mark tag.

Centering Images as a Group

If you Align 2 or more images to the center, but next to each other, then wrap both images between this css:

<p style="text-align: center;"> image1, image2, image3 </p>

Example: