Basic html helpv————————-…

by

I need some help in structuring some html elements without the use of a table.

I want to have two titles called source and destination( just titles) under destination and source i will have a source language like English and a destination language like French.

these are displayed from the database based on the user query so they can be empty spans.

Under English i will have ” I love to swim in cold water” ( again this is displayed from the database) and its French translation under destination”

This is what i have so far:

<div id=”#”>
<p> Source | Destination </p>
<span>English</span><span>French</span>
</div>
<div>
<p><span> ” I love to swim in cold water”
</span>     
<span> jor eti fedono matoer”</span> </p>

</div>

✅ Answers

? Best Answer

  • So… You want to have a table of information, but are reluctant to use a table to do so?

    Why, oh why…

    If you’re basically asking, “How can I align two blocks of text, who’s width/length I don’t know beforehand, into a table, without using a table?”, then you’re going to struggle using just HTML.

    The problem is that <SPAN> is an in-line element. Which means that you can’t assign a fixed width to it. A <TABLE> on the other hand, you can.

    As such, what you’ll find is that you’ll end up having something like:

    Source | Destination
    English French
    “I love to swim in cold water” “jor eti fedono matoer”
    “I hate French” “Je déteste français”

    It won’t align nicely, and will look, to be frank, terrible.

    Might I enquire as to why you’re so reluctant to use a <TABLE> tags? As you seem to be reinventing the wheel…

    If you’re dead set on using SPAN, then you’ll need to use the following in the head of your HTML page:

    <style type=”text/css”>

    span {
    display: inline-block;
    width: 50px;
    text-align: center;
    }

    </style>

    Alternatively, you can change the <SPAN> tag in question to read:

    <SPAN STYLE=”display: inline-block; width: 50px; text-align: center;”>English</SPAN>

    And so on… So you’re final markup could look like:

    <div id=”#”>
    <p><SPAN STYLE=”display: inline-block; width: 50px; text-align: center;”>Source</SPAN><SPAN STYLE=”display: inline-block; width: 50px; text-align: center;”>Destination</SPAN> </p>
    <SPAN STYLE=”display: inline-block; width: 50px; text-align: center;”>English</SPAN><SPAN STYLE=”display: inline-block; width: 50px; text-align: center;”>French</SPAN>
    </div>
    <div>
    <p><SPAN STYLE=”display: inline-block; width: 50px; text-align: center;”>”I love to swim in cold water”</SPAN>
    <SPAN STYLE=”display: inline-block; width: 50px; text-align: center;”>”jor eti fedono matoer”</SPAN> </p>

    </div>

    It’s probably best to go with the <HEAD> solution mentioned first of all… It’s a lot less work. As such, you probably want to assign ID’s to them too. So your finished code could well look like:

    <HTML>
    <HEAD>
    <STYLE type=”text/css”>
    span #table {
    display: inline-block;
    width: 50px;
    text-align: center;
    }
    </STYLE>
    </HEAD>
    <BODY>
    <div id=”#”>
    <p><span id=”table”>Source</span><span id=”table”>Destination</span></p>
    <span id=”table”>English</span><span id=”table”>French</span>
    </div>
    <div>
    <p><span id=”table”>”I love to swim in cold water”</span>
    <span id=”table”>”jor eti fedono matoer”</span></p>
    </BODY>
    </html>
    <!– spaceId: 2114717203 –>

    Obviously, throughout this, you’ll want to change the – width: 50px; – to a larger, more suitable size.

    Hope this helps!
    .

  • A table (ie using the table tag) might be the way to go – it depends on the nature and size of the data as to how attractive it might appear. Have a look at http://www.w3schools.com/cssref/pr_tab_t… and associated pages to see how you can control some aspects of a table.

    If you don’t want to use the table tag, (and there are several reasons for preferring not to) a similar layout can be achieved: http://snook.ca/archives/html_and_css/ge…

    • Leave a Comment