Font looking different in <pre></pre> tags

Hi :slight_smile:

I’ve been using the <pre></pre> tags lately to display data stored in a db. I noticed that the texts displayed within these tags are somehow different from the rest of the sites. It looks a bit smaller. I would even find that the font is a bit different.

Is it just me?

Using IE6 by the way.

:slight_smile:

no, it’s not just you

yes, the font is different – for one thing, by default the browser will use a monospace font

that’s what PRE is for

feel free to override it with css

Is there some reason you’re not using a <table> to display tabular data coming from a database?

thanks rudy :slight_smile:

@vinnie: I thought that <table> was evil :slight_smile: you mean like <table> <tr> <td> etc?

duuudie, if you are pulling rows 'n columns from a database table, then yes, html TABLE, TR, and TD is the best and only sane way to display the data

By the way, how would you change the default <pre> font? Would something like

pre {
css definition
}

or

pre p {
css definition
}

be good?

Cheers :slight_smile:

To change the font on your <pre> tags, just do this:


pre {
  font-family: Verdana, "Bitstream Vera Sans", Geneva, sans-serif;
}

yeah, that’s fine, but if you’re gonna use a proportional font, then why even bother with PRE, i mean, other than to stuff some variable width spaces in there?

and no, you typically wouldn’t style PRE P, because again, why would you have a P inside PRE?

I think that forums like vBulletin are using <pre> tags all the time. Moreover I am not sure that including <table> would be a good thing for the future (separating content and presentation). But I am still a newcommer even tho I have more than 300 posts (lot of questions, lot of thanks as well :)) therefore I am always eager to learn. I’ve heard many times that tables were ‘the old tag soup’ but I might have misunderstood something of course.

You’re right about <p> inside <pre>… where was my head at? :wink:

Could tell me a bit more about these variables?

Anyways thanks a lot for your ghreat help guys :slight_smile: I really appreciate it.

Tables for LAYOUT are not ideal. Tables for presenting DATA are just fine, and as a matter of fact are encouraged. Tables aren’t going away any time soon; they’re still even available in the working drafts for XHTML 2.0 :).

the purpose of the html TABLE tag is to mark up tabular data

if you use it for tabular data, you are using it correctly, and you will always be able to do that

the intent of the TABLE structure is to show data

TABLE is perfect, and there’s nothing wrong with using it

however, if you are using TABLE to lay out divs and sliced images and spacer gifs and crap like that, then you are not using TABLE for its intended purpose

that’s all

:cool:

:eek:

all my beliefs… are… gone… in one minute.

Okay okay… Now let me catch my breath.

So using tables to display a form is not correct right (I wish it was)?
But using tables to show data, like in

<table>
<tr>
<td>
db row
</td>
<td>
db row 2
</td>
</tr>
</table>

is ok righ?

heh… very interesting.

Actually, this is a better way of doing it:


<table summary="a short description of the data being displayed">
<caption>Figure 1.1</caption>
<thead>
  <tr>
    <th>Table header 1</th><th>Table header 2</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>Data cell 1</td><td>Data cell 2</td>
  </tr>
</tbody>
</table>

using html TABLE to lay out a form is quite acceptable

provided that you use the columns consistently, e.g. label in one cell, field in adjacent cell

but on the other hand, laying out a form with css is easy and some would say better

the only people who really notice the difference are those using screen readers

Thanks a lot for your answers :slight_smile:

Thank you so much for the example vinnie.

But… obviously… here comes the obvious question.

table or <pre>. why both? One is obsolete. I would even say that, reading your posts, <pre> is useless. So why would one use <pre> tags? What for?

Thanks a lot for your enlightening explanations.

<pre> isn’t useless. It’s for preformatted text. I use it all the time when marking up large code blocks.

neither TABLE nor PRE is obsolete

TABLE should remind you of databases, and in databases you have tables and columns, where each column must contain a single type of data (unlike excel, where each cell can hold any type of data)

PRE should remind you of “preformatted” and the best example of where to use it is called “ascii art”

consider this:

                    _..---.._
                  .' .-'''-. '.
                 / .'  _..._'. \\
          __    : :  /`;'   ) : :          _,="`\\
    ,--''`  ``'.; : |;   ,-;  : ;  __..==""==.,_|
     `-,        `; .\\;  / ^\\ _,.="//
        '-,_.--._ '.(;_.'__/`_.-'`\\
  ,.--''`` _..=. `'--.//   ``      \\
  `--,   '`      `-  |_\\ '-.       |
      `-._         _.;--`-..___,.-'`
          `'-...-_:',;`==,| \\
            _.--',=" /   /"=;="=,
         _.'  ,=".-'`  .'  /| ,="
    _.--' .-' "=,     :  .' | ",
    `;._ .--'.'    .-' .' . ;
    ,;;\\_ .   '._.'--'` -' /
      ,;;;._  '-._ .''.__.'
           `\\_  .' '._   /
              '._      .(`
     jgs        '._ ';./
                   `;`.
                     `

http://www.geocities.com/SoHo/7373/index.htm

and now consider this:


                        _..---.._
                      .' .-'''-. '.
                     / .'  _..._'. \\
              __    : :  /`;'   ) : :          _,="`\\
        ,--''`  ``'.; : |;   ,-;  : ;  __..==""==.,_|
         `-,        `; .\\;  / ^\\ _,.="//
            '-,_.--._ '.(;_.'__/`_.-'`\\
      ,.--''`` _..=. `'--.//   ``      \\
      `--,   '`      `-  |_\\ '-.       |
          `-._         _.;--`-..___,.-'`
              `'-...-_:',;`==,| \\
                _.--',=" /   /"=;="=,
             _.'  ,=".-'`  .'  /| ,="
        _.--' .-' "=,     :  .' | ",
        `;._ .--'.'    .-' .' . ;
        ,;;\\_ .   '._.'--'` -' /
          ,;;;._  '-._ .''.__.'
               `\\_  .' '._   /
                  '._      .(`
         jgs        '._ ';./
                       `;`.
                         `
[http://www.geocities.com/SoHo/7373/index.htm](http://www.geocities.com/SoHo/7373/index.htm)

exact same code in both cases

on a sidenote, i still belive that it’s ascii art has nothing to do in a discussion on standards…we’re trying to separate presentation from content, avoiding the perversion of tags for purposes which they were not meant for (tables for layout, for instance)…and then obfuscate the issue by talking about ascii art, which is in my book one of the biggest *******isations of them all…

not to sound harsh or anything :wink:

a discussion of standards? sure, but that’s some other thread

this thread is about PRE, and how “the texts displayed within these tags are somehow different from the rest”

obfuscate the issue? what issue would that be?

nothing wrong with ascii art, it’s great

i’m really curious what that bleeped word was, and who p1ssed in your corn flakes, redux

:wink:

b-astardisations perhaps? :slight_smile: