Page 1 of 2
HTML gurus!
Posted: Wed Oct 27, 2010 1:04 am
by USCode
Help! I know next to nothing about HTML...
I want to display some tabular data in a web browser and I believe the HTML table is my best bet?
I have the following criteria:
- The same font name, size and style for the entire table
- Column heading text
- Each column will have a different background and foreground (font) color
- Each column could have a different width
- An occasional row may need to have a different background color
- How do I get column alignment?
After doing some web research, this is what I came up with but it seems messy.
Is there a cleaner/better way to fulfill the above criteria?
Code: Select all
<html>
<body>
<STYLE TYPE="text/css">
<!--
TR{font-family: Arial; font-size: 12pt; font-style:italic;}
--->
</STYLE>
<table border=0 bgcolor=gray cellspacing=1 cellpadding=1>
<col span="1" style="background-color:blue" />
<col span="2" style="background-color:yellow" />
<tr>
<th width=125>Month</th>
<th width=200>Savings</th>
</tr>
<tr>
<td ><font color=red>January</font></td>
<td><font color=purple>$100</font></td>
</tr>
<tr bgcolor = purple>
<td><font color=red>February</font></td>
<td><font color=purple>$200</font></td>
</tr>
<tr>
<td><font color=red>March</font></td>
<td><font color=purple>$300</font></td>
</tr>
</table>
</body>
</html>
Re: HTML table gurus!
Posted: Wed Oct 27, 2010 1:25 am
by dhouston
USCode wrote:- How do I get column alignment?
- ALIGN="LEFT"
ALIGN="CENTER"
ALIGN="RIGHT"
VALIGN="TOP"
VALIGN="MIDDLE"
VALIGN="BOTTOM"
VALIGN="BASELINE"
Both ALIGN and VALIGN can be used with Table Row or Table Data or Table Header tags.
Re: HTML table gurus!
Posted: Wed Oct 27, 2010 2:13 am
by USCode
dhouston wrote:... Both ALIGN and VALIGN can be used with Table Row or Table Data or Table Header tags.
Thanks dhouston.
So there's no way to apply it to an entire column? In my case I have to apply it to Table Data to get the entire column right-justified?
Re: HTML table gurus!
Posted: Wed Oct 27, 2010 2:24 am
by dhouston
I haven't done a lot of HTML lately but I think you need to use it with each Table Data tag.
Re: HTML table gurus!
Posted: Wed Oct 27, 2010 3:32 am
by Seymour Clufley
You could use CSS with each cell in the column. Although, I don't know how to control the ALIGN attribute with CSS. VALIGN is written as:
Re: HTML table gurus!
Posted: Wed Oct 27, 2010 3:37 am
by Seymour Clufley
It's just occurred to me that, depending on the target platform, you could drop the table layout and use multi-column layout instead, which is much more suitable for what (I think) you want to do. You can style whole columns with that much more easily. However, it is not supported by IE (only by Chrome, Safari, Firefox, and the next build of Opera).
Re: HTML gurus!
Posted: Wed Oct 27, 2010 4:06 am
by USCode
I also appreciate the alternative suggestions.
Unfortunately IE is still the most popular browser, so it would need to be supported there, as well as on mobile browsers for Android, iOS, etc.
Re: HTML gurus!
Posted: Wed Oct 27, 2010 9:44 am
by El_Choni
Why not?:
Code: Select all
<style type="text/css">
td { text-align: right }
</style>
Re: HTML gurus!
Posted: Wed Oct 27, 2010 12:58 pm
by Blood
USCode wrote:After doing some web research, this is what I came up with but it seems messy.
Is there a cleaner/better way to fulfill the above criteria?
One tip, use CSS properly, never use style mixed in the presentation of data, keep the style separate from the HTML and it will look cleaner.
Re: HTML gurus!
Posted: Wed Oct 27, 2010 1:01 pm
by Trond
USCode wrote:Help! I know next to nothing about HTML...
I want to display some tabular data in a web browser and I believe the HTML table is my best bet?
When you want to display tabular data it's best to use a table, yes. Normally you would use css to apply colours and font styles.
And don't close tags with /> in HTML, it's not allowed.
Code: Select all
<html>
<head>
<style type="text/css">
/* Style that applies to the entire table */
table {
font-family: Arial;
font-size: 12pt;
font-style:italic;
background-color: rgb(0, 0, 128);
}
/* Style that applies to first column */
/* Unfortunately, only the bg colour works here in most browsers */
.col1 {
background-color: rgb(128, 128, 255);
}
/* And the second */
.col2 {
background-color: rgb(255, 128, 128);
}
/* First row cells */
.cell_l {
color: rgb(0, 0, 128);
text-align: right;
}
/* Second row cells */
.cell_r {
color: rgb(0, 0, 128);
}
/* Styling for the headers */
.theader {
font-weight: bold;
text-align: center;
}
/* Special row styling */
.row_highlight_1 {
background-color: rgb(255, 255, 0);
}
</style>
</head>
<body>
<table border=0 cellspacing=1 cellpadding=3>
<col span=1 class=col1>
<col span=2 class=col2>
<tr>
<td class=theader width=125>Month</td>
<td class=theader width=200>Savings</td>
</tr>
<tr>
<td class=cell_l>January</td>
<td class=cell_r>$100</td>
</tr>
<tr class=row_highlight_1>
<td class=cell_l>February</td>
<td class=cell_r>$200</td>
</tr>
<tr>
<td class=cell_l>March</td>
<td class=cell_r>$300</td>
</tr>
</table>
</body>
</html>
Re: HTML gurus!
Posted: Wed Oct 27, 2010 3:18 pm
by helpy
[edit] uuups ... translation see:
http://www.purebasic.fr/english/viewtop ... 52#p337552 [/edit]
Einige Anmerkungen
1. <style>-Abschnitt in <head>-Abschnitt verschieben!
Der <style>...</style> Bereich darf sich nicht innerhalb des <body>...</body> Bereichs befinden!
Siehe Referenz auf selfhtml:
==>
http://de.selfhtml.org/html/referenz/elemente.htm#style
2. Klein-/Großschreibung von Tags und Attributen, Anführungszeichen bei Attributen:
Zitate von
selfhtml:
Bei herkömmlichem HTML spielt es keine Rolle, ob die Elementnamen in den Tags in Klein- oder Großbuchstaben notiert werden. Dort bedeuten z.B. <h1> und <H1> das Gleiche. In der neueren HTML-Variante, in XHTML, müssen die Elementnamen dagegen klein geschrieben werden. Es ist deshalb zu empfehlen, die Elementnamen immer klein zu schreiben, egal ob Sie HTML oder XHTML schreiben wollen.
Obwohl es vom HTML-Standard her zulässig wäre, dass bestimmte Attributwerte auch ohne Anführungszeichen geschrieben werden können, sollten Sie diese Möglichkeit nicht nutzen. Es verringert die Wahrscheinlichkeit von Fehlern, wenn Sie grundsätzlich alle Werte, die Sie Attributen zuweisen, in einfache ' oder doppelte " Anführungszeichen setzen. Sie können diese zwei Arten innerhalb einer Datei beliebig mischen, lediglich für ein einzelnes Attribut müssen an Anfang und Ende dieselben Zeichen benutzt werden. Welches Zeichen Sie wählen, ist im Prinzip egal.
3. Schließende/Öffnende Tags müssen zueinander passen:
Code: Select all
<td class="theader" width="125">Month</th>
<td class="theader" width="200">Savings</th>
Entweder <td></td> oder <th></th> !!!
cu, guido
Re: HTML gurus!
Posted: Wed Oct 27, 2010 3:21 pm
by helpy
you can use the w3c validator:
==>
http://validator.w3.org/
Re: HTML gurus!
Posted: Wed Oct 27, 2010 3:33 pm
by TomS
Now in english, please
Summation: <style> must be parent of <head>
Code: Select all
<!-- Specification //-->
<html>
<head>
<style>
<!--
style
//-->
</style>
</head>
<body>
</body>
</html>
It's better for all elements to be lowercase because in xhtml it's mandatory. In html it's not however, just to be on the safe side and to be able to extend your code easily in the future.
Attribute values must be in quotes or doublequotes. This is not mandatory for numbers
But again: to be on the safe side do it anyway.
^This^ is wrong. Use quotes or doublequotes.
Opening and closing tags must match.
Do not close <th> with </td> etc.
Use the validator from the w3c^^
Re: HTML gurus!
Posted: Wed Oct 27, 2010 6:52 pm
by helpy
I AM SORRY! ... this happens to me from time to time
Some remarks:
1. <style>-section must be moved to <head>-section!
The <style>-section may not be inside <body>-section!
German reference on selfhtml:
==>
http://de.selfhtml.org/html/referenz/elemente.htm#style
2. uppercase/lowercase of tags/attributes, use of quotes for values of attributes:
In conventional HTML the the use of upper and/or lower case is irrelevant. In new HTML version (i.e. XHTML) the names of elements must bei lower case. Therefore it is recommended to use lower case for elements (tags and attributes).
Although in the HTML specification it is allowed to write values of SOME attributes without quotes, it is recommended to use quotes in any case. This helps to avoid errors in html code, because there are cases, where quotes are required. You can use single or double quotes, but one single attribute value hast to be included in single or double quotes (attrib="value" or attrib='vlaue'). Inside a document you can use both.
3. closing and openening tags has to be the same:
The following is not valid html code:
Code: Select all
<td class="theader" width="125">Month</th>
<td class="theader" width="200">Savings</th>
Use either
<td></td> or
<th></th> !!!
cu, guido
Re: HTML gurus!
Posted: Thu Oct 28, 2010 12:40 am
by Vera
Hi USCode,
I made a little
tableTest.html. It's surley not perfect
(not round by all means) but maybe a good example to play around with the values and get an idea 'bout using css.
and if you don't mind the german language you may also get different offline versions from
de.selfhtml
small hint: inline descriptions
(within the tags themselves) overrule global style settings
(css)
greetings ~ Vera