How can I create a product comparison chart for my website?

I am making a software review website and want to a product comparison chart displayed at the beginning of most of my web pages.

I don’t know HTML, how can I do it?

A comparison chart would likely be a table of data, such as product name, publisher, licence, price, website, review, and rating. This would best be displayed using the table tag.

The following illustrates a product comparison table.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd" >
<html lang=’en’>
<head>
<meta http-equiv=’Content-type’ content=’text/html;charset=UTF-8′>
<title>Product Comparison Chart</title>
</head>
<body>
<h1>Product Comparison Chart</h1>
<table border="1">
<tr><th>product</th>
<th>publisher</th>
<th>licence</th>
<th>price</th>
<th>website</th>
<th>review</th>
<th>rating</th></tr>
<tr><td>notepad2</td>
<td>Florian Balmer</td>
<td>Open Source – BSD software</td>
<td>free</td>
<td><a href="http://www.flos-freeware.ch/" > http://www.flos-freeware.ch/ </a></td>
<td>An excelent, free, windows text editor with syntax highlighting.</td>
<td>5*</td></tr>
<tr><td>kompozer</td>
<td>KompoZer Project</td>
<td>Creative Commons Attribution-ShareAlike</td>
<td>free</td>
<td><a href="http://www.kompozer.net/" > http://www.kompozer.net/ </a></td>
<td>KompoZer is a complete web authoring system that combines web file management and easy-to-use WYSIWYG web page editing.</td>
<td>4*</td></tr>
</table>
</body>
</html>

For more on the table tag see: http://www.html-tags-guide.com/html-table-tag.html

This entry was posted in comparison. Bookmark the permalink.

One Response to How can I create a product comparison chart for my website?

  1. Michael says:

    A comparison chart would likely be a table of data, such as product name, publisher, licence, price, website, review, and rating. This would best be displayed using the table tag.

    The following illustrates a product comparison table.

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd&quot; >
    <html lang=’en’>
    <head>
    <meta http-equiv=’Content-type’ content=’text/html;charset=UTF-8′>
    <title>Product Comparison Chart</title>
    </head>
    <body>
    <h1>Product Comparison Chart</h1>
    <table border="1">
    <tr><th>product</th>
    <th>publisher</th>
    <th>licence</th>
    <th>price</th>
    <th>website</th>
    <th>review</th>
    <th>rating</th></tr>
    <tr><td>notepad2</td>
    <td>Florian Balmer</td>
    <td>Open Source – BSD software</td>
    <td>free</td>
    <td><a href="http://www.flos-freeware.ch/&quot; > http://www.flos-freeware.ch/ </a></td>
    <td>An excelent, free, windows text editor with syntax highlighting.</td>
    <td>5*</td></tr>
    <tr><td>kompozer</td>
    <td>KompoZer Project</td>
    <td>Creative Commons Attribution-ShareAlike</td>
    <td>free</td>
    <td><a href="http://www.kompozer.net/&quot; > http://www.kompozer.net/ </a></td>
    <td>KompoZer is a complete web authoring system that combines web file management and easy-to-use WYSIWYG web page editing.</td>
    <td>4*</td></tr>
    </table>
    </body>
    </html>

    For more on the table tag see: http://www.html-tags-guide.com/html-table-tag.html
    References :