HTML gurus!

USCode · Post by **USCode** » Wed Oct 27, 2010 1:04 am

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>

dhouston · Post by **dhouston** » Wed Oct 27, 2010 1:25 am

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.

USCode · Post by **USCode** » Wed Oct 27, 2010 2:13 am

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?

dhouston · Post by **dhouston** » Wed Oct 27, 2010 2:24 am

I haven't done a lot of HTML lately but I think you need to use it with each Table Data tag.

Seymour Clufley · Post by **Seymour Clufley** » Wed Oct 27, 2010 3:32 am

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:

Code: Select all

.class { vertical-align:5px; }

Seymour Clufley · Post by **Seymour Clufley** » Wed Oct 27, 2010 3:37 am

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).

USCode · Post by **USCode** » Wed Oct 27, 2010 4:06 am

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.

El_Choni · Post by **El_Choni** » Wed Oct 27, 2010 9:44 am

Why not?:

Code: Select all

<style type="text/css">
td { text-align: right }
</style>

Blood · Post by **Blood** » Wed Oct 27, 2010 12:58 pm

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.

Trond · Post by **Trond** » Wed Oct 27, 2010 1:01 pm

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>

helpy · Post by **helpy** » Wed Oct 27, 2010 3:18 pm

[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

helpy · Post by **helpy** » Wed Oct 27, 2010 3:21 pm

you can use the w3c validator:

==> http://validator.w3.org/

TomS · Post by **TomS** » Wed Oct 27, 2010 3:33 pm

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

Code: Select all

<element width=100>

But again: to be on the safe side do it anyway.

Code: Select all

<element width=100%>

^This^ is wrong. Use quotes or doublequotes.

Code: Select all

<element width="100%">

Opening and closing tags must match.
Do not close <th> with </td> etc.

Use the validator from the w3c^^

helpy · Post by **helpy** » Wed Oct 27, 2010 6:52 pm

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

Vera · Post by **Vera** » Thu Oct 28, 2010 12:40 am

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

PureBasic Forums - English

HTML gurus!

HTML gurus!

Re: HTML table gurus!

Re: HTML table gurus!

Re: HTML table gurus!

Re: HTML table gurus!

Re: HTML table gurus!

Re: HTML gurus!

Re: HTML gurus!

Re: HTML gurus!

Re: HTML gurus!

Re: HTML gurus!

Re: HTML gurus!

Re: HTML gurus!

Re: HTML gurus!

Re: HTML gurus!