Fare Chart in HTML

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?




Fare Chart




Train Number
Timings Fare


104845
4:50 to

23:21Fare- Rs.122


105454
5:47 to 8:11Fare- Rs.342



1054555
2:42 to 2:12Fare- Rs.652


105454
2:27 to 5:51Fare-

Rs.772


133354
2:43 to 1:11Fare- Rs.762

104845
4:50

to 23:21Fare- Rs.562


105454
5:47 to 8:11Fare- Rs.477



1054555
2:42 to 2:12Fare- Rs.999


105454
2:27 to 5:51Fare-

Rs.933



Errors

` would fail to parse properly: since the attribute value is unquoted, the tag would be interpreted as having three attributes:



• face="comic"






• sans






• ms




is not allowed to appear inside a , but could be permissible in HTML5 (but not HTML 4.01) if it appears inside a 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 , BACKGROUND=1.gif and TEXT=green






• In , border=1 and align=center






• The entire tag






• Any 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 .

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

Put your heading row in a element.

"Fare- " in the Fare column is redundant.

Take care to use consistent indentation.

Recommendation






Fare Chart

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;
}




Fare Chart


Train Number
Timings
Fare




104845
4:50 to 23:21
Fare- Rs.122


105454
5:47 to 8:11
Fare- Rs.342


1054555
2:42 to 2:12
Fare- Rs.652


105454
2:27 to 5:51
Fare- Rs.772


133354
2:43 to 1:11
Fare- Rs.762


104845
4:50 to 23:21
Fare- Rs.562


105454
5:47 to 8:11
Fare- Rs.477


1054555
2:42 to 2:12
Fare- Rs.999


105454
2:27 to 5:51
Fare- Rs.933








Here, I've put the CSS styles inline within the element. Ideally, the stylesheet would be in its own .css file, shared among all pages in your website, and included by reference using `

StackExchange Code Review Q#44727, answer score: 8