HTML Headings & Tables - Online Article

To know how to create HTML page, view the previous tutorial, HTML Basics.

Headings

Headings are defined with the <h1> to <h6> tags. <h1> defines the largest heading. <h6> defines the smallest heading.

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h4>This is a heading</h4>
<h5>This is a heading</h5>
<h6>This is a heading</h6>

Paragraphs

Paragraphs are defined with the <p> tag.

<p>This is a paragraph</p>
<p>This is another paragraph</p>

Line Breaks

The <br> tag is used when you want to end a line, but don't want to start a new paragraph. The <br> tag forces a line break wherever you place it.

<p>This <br> is a paragraph with <br>line breaks</p>

Comments in HTML

The comment tag is used to insert a comment in the HTML source code. A comment will be ignored by the browser. You can use comments to explain your code, which can help you when you edit the source code at a later date.

<! -- This is a comment -->

HTML Text Formatting

Text Formatting Tags

Tag Description
<b> Defines bold text
<big> Defines big text
<em> Defines emphasized text 
<i> Defines italic text
<small> Defines small text
<strong> Defines strong text
<sub> Defines subscripted text
<sup> Defines superscripted text
<ins> Defines inserted text
<del> Defines deleted text
<s> Deprecated.
Use <del> instead
<strike> Deprecated.
Use <del> instead
<u> Deprecated.
Use styles instead

Computer Output Tags

Tag Description
<code> Defines computer code text
<kbd> Defines keyboard text 
<samp> Defines sample computer code
<tt> Defines teletype text
<var> Defines a variable
<pre> Defines preformatted text
<listing> Deprecated.
Use <pre> instead
<plaintext> Deprecated.
Use <pre> instead
<xmp> Deprecated.
Use <pre> instead

Citations, Quotations, and Definition Tags

Tag Description
<abbr> Defines an abbreviation
<acronym> Defines an acronym
<address> Defines an address element
<bdo> Defines the text direction
<blockquote> Defines a long quotation
<q> Defines a short quotation
<cite> Defines a citation
<dfn> Defines a definition term

HTML Tables

Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). The letters td stands for "table data," which is the content of a data cell. A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc.

<table border="1">
	<tr>
		<td>row 1, cell 1</td>
		<td>row 1, cell 2</td>
	</tr>
	<tr>
		<td>row 2, cell 1</td>
		<td>row 2, cell 2</td>
	</tr>
</table>

How it looks in a browser:

Image1

Tables and the Border Attribute

If you do not specify a border attribute the table will be displayed without any borders. Sometimes this can be useful, but most of the time, you want the borders to show. To display a table with borders, you will have to use the border attribute:

<table border="1">
	<tr>
		<td>Row 1, cell 1</td>
		<td>Row 1, cell 2</td>
	</tr>
</table> 

Headings in a Table

Headings in a table are defined with the <th> tag.

<table border="1">
	<tr>
		<th>Heading</th>
		<th>Another Heading</th>
	</tr>
	<tr>
		<td>row 1, cell 1</td>
		<td>row 1, cell 2</td>
		</tr>
	<tr>
		<td>row 2, cell 1</td>
		<td>row 2, cell 2</td>
	</tr>
</table> 

How it looks in a browser:

Image2

Below given is the view of the web page after adding headings and tables.

secondpagesnap.jpg

To view the code of this tutorial, click here.

About the Author:

No further information.




Comments

No comment yet. Be the first to post a comment.