8
\$\begingroup\$

I am a beginner and I have made a Fare Chart in HTML. I'm pretty sure it will look horrible to any developer out there, but hey, that's why I've posted it.

I'd like a general review of this. I'm especially concerned about the quality and enhancements of this form. What should I do to add attractive looks and show that fare & time which is allotted by me?

<html>
<body BACKGROUND=1.gif TEXT=green><table border="1"><font face=comic sans ms><h1>Fare Chart</h1> 
<tr> 
<td> 
 <table border="1" align=center> 
 <tr> 
 <th>Train Number</th> 
 <th>Timings</th> <th><b>Fare</b></th>
 </tr> 
 <tr> 
 <td>104845</td>
 <td>4:50 to 

23:21</td><td>Fare- Rs.122</td> 
 </tr> 
 <tr> 
 <td>105454</td>
 <td>5:47 to 8:11</td><td>Fare- Rs.342</td> 
 </tr> 
 <tr> 


<td>1054555</td>
 <td>2:42 to 2:12</td><td>Fare- Rs.652</td> 
 </tr> 
<tr> 
 <td>105454</td>
 <td>2:27 to 5:51</td><td>Fare- 

Rs.772</td> 
 </tr> 
 <tr> 
 <td>133354</td>
 <td>2:43 to 1:11</td><td>Fare- Rs.762</td> 
 </tr> <tr> 
 <td>104845</td>
 <td>4:50 

to 23:21</td><td>Fare- Rs.562</td> 
 </tr> 
 <tr> 
 <td>105454</td>
 <td>5:47 to 8:11</td><td>Fare- Rs.477</td> 
 </tr> 
 <tr> 


<td>1054555</td>
 <td>2:42 to 2:12</td><td>Fare- Rs.999</td> 
 </tr> 
<tr> 
 <td>105454</td>
 <td>2:27 to 5:51</td><td>Fare- 

Rs.933</td> 
 </tr> 
 <tr> 

\$\endgroup\$
7
\$\begingroup\$

Errors

<font face=comic sans ms> would fail to parse properly: since the attribute value is unquoted, the tag would be interpreted as having three attributes:

  • face="comic"
  • sans
  • ms

<h1> is not allowed to appear inside a <table>, but could be permissible in HTML5 (but not HTML 4.01) if it appears inside a <caption> element.

Separation of content and presentation

Including presentation markup in your HTML is so last millennium. Ever since the introduction of Cascading Style Sheets, the accepted practice is to do all styling using CSS. Therefore, the following markup should be relegated to CSS:

  • In <body>, BACKGROUND=1.gif and TEXT=green
  • In <table>, border=1 and align=center
  • The entire <font> tag
  • Any <b> tag

Furthermore, you have a table within a table. The outer table appears to be used not to present tabular data, but for grouping the inner table with its caption. Such abuse of the outer table for layout purposes is frowned upon.

Miscellaneous

You need a doctype declaration at the top to specify which version of the HTML standard should be used to interpret your page. These days, you should probably use the HTML5 doctype, which is just <!DOCTYPE html>.

Run your HTML through a validator. It will automatically point out many problems. For example, a <head> with a <title> is mandatory.

Put your heading row in a <thead> element.

"Fare- " in the Fare column is redundant.

Take care to use consistent indentation.

Recommendation

<!DOCTYPE html>
<html>
  <head>
    <title>Fare Chart</title>
    <style type="text/css">
      body {
        background-image: url(1.gif);
        color: green;
        /* Seriously? https://google.com/search?q=%22comic+sans%22&tbm=isch */
        font-family: "comic sans ms";
      }
      table {
        /* Centers table in the page, like align=center */
        margin: auto;
      }
      table, th, td {
        /* Equivalent to table border=1 */
        border: 1px solid black;
      }
      h1 {
        text-align: left;
      }
    </style>
  </head>
  <body>
    <table>
      <caption><h1>Fare Chart</h1></caption>
      <thead>
        <tr> 
          <th>Train Number</th> 
          <th>Timings</th>
          <th>Fare</th>
        </tr>
      </thead>
      <tbody>
        <tr> 
          <td>104845</td>
          <td>4:50 to 23:21</td>
          <td>Fare- Rs.122</td> 
        </tr> 
        <tr> 
          <td>105454</td>
          <td>5:47 to 8:11</td>
          <td>Fare- Rs.342</td> 
        </tr> 
        <tr>
          <td>1054555</td>
          <td>2:42 to 2:12</td>
          <td>Fare- Rs.652</td> 
        </tr>
        <tr> 
          <td>105454</td>
          <td>2:27 to 5:51</td>
          <td>Fare- Rs.772</td> 
        </tr> 
        <tr> 
          <td>133354</td>
          <td>2:43 to 1:11</td>
          <td>Fare- Rs.762</td> 
        </tr>
        <tr> 
          <td>104845</td>
          <td>4:50 to 23:21</td>
          <td>Fare- Rs.562</td> 
        </tr>
        <tr> 
          <td>105454</td>
          <td>5:47 to 8:11</td>
          <td>Fare- Rs.477</td> 
        </tr>
        <tr>
          <td>1054555</td>
          <td>2:42 to 2:12</td>
          <td>Fare- Rs.999</td> 
        </tr>
        <tr> 
          <td>105454</td>
          <td>2:27 to 5:51</td>
          <td>Fare- Rs.933</td> 
        </tr>
      </tbody>
    </table>
  </body>
</html>

Here, I've put the CSS styles inline within the <style> element. Ideally, the stylesheet would be in its own .css file, shared among all pages in your website, and included by reference using <link rel="stylesheet" type="text/css" href="/path/to/stylesheet.css">

\$\endgroup\$
3
\$\begingroup\$

HTML is a markup language. The only thing bad here is the missing closing tags for body and html, and your indentation.

What should I do to add attractive looks and show that fare & time which is allotted by me?

CodeReview only reviews your code. We won't write it for you (this also includes CSS and various forms of design and styling). "Attractive looks" is also subjective, you'd have to decide what "attractive" is for you since it's your website.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy