....
T A B L E / L I S T ...S E C T i O N

....

This section contain a HTML tag which relate to List Displayed and Table Displayed so If U have a problem or just curious about it. Before we start Both group of tag is 2 way tag again so Don’t forget to create a close tag before U finish creating yout HTML file. Well, let’s check it out, I will start with List Tag first.



....
LIST TAG.

There are 3 types of List tag that is usually use, Ordered List, Unordered List and Definition List. I will separate in 2 tag explained, Order List and Unordered list first, Then finish by Definition List.

  • List tag must lead all list in your whole list only in Ordered List and Unordered List. It is a one way tag, when U want to start a new list in your order U must put a
  • Tag in front of it. ( U will clearly understand with an example a later on ).

      • . . .

    OL referred to Ordered List ( yeah! U can guess that ) so If U want to make an ordered List U must ‘cover’ that list by this tag. Remember that all list must lead with
  • if U forget to put it on, your new list will continued from a previous sentence. Ordered List will create a numeric bullet automatically list for your list so If U add more list between them it will re-list it automatic. Let’s see an example.


    1. First Room.
    2. Second Room.
    3. Third Room.
    4. Forth Room.


    ....
    The result will be like this…

    1. First Room.
    2. Second Room.
    3. Third Room.
    4. Forth Room.

    • Unordered List will create a bit different appearance from Ordered List, it show a bullet instead of a numeric ordered list because it is Unordered List so it won’t appear in an order, just a Bullet.


    • First Room.
    • Second Room.
    • Third Room.
    • Forth Room.


    ....
    The result is …

    • First Room.
    • Second Room.
    • Third Room.
    • Forth Room.

    ....
    When an Unordered List lead with a bullet, HTML tag allow a little decoration with a bullet. The default bullet is the way U see it, a solid bullet. U can edit a bullet by include TYPE=xxx in an open tag, like this.

      will create a hollow bullet.
        will create a square bullet.
        It might not work in some browser, it’s depend on U now.




    ....

    . . .

    Definition List is a bit different from Ordered List and Unordered List, Definition will create a topic and a definition separate with a different place listed. Well, U will understand all of them when U view an example.


    It might refers to Definition Topic, ( it’s my opinion ) Well it is a one way topic. U must start your topic list by this tag.


    Definition Details ( my opinion again ) is for a Detail of a topic list, it will about 1 tag space behind a
    tag, as I said it will go after a topic list. Let’s see and example and U will have an idea.


    ....


    First Room.
    contain a lot of Funny stuff.
    Second Room.
    all music U want is there.
    Third Room.
    If u really worry about something, drop them in rest is our!!!


    ....
    Here is a result.

    First Room.
    contain a lot of Funny stuff.
    Second Room.
    all music U want is here.
    Third Room.
    If u really worry about something, drop them in rest is our!!!

    ....
    Well now U know all List Tag already, Don’t forget to use it wisely, adapted it with the rest of your knowledge. U can easily create a link with an Ordered list tag and no need to worry to change your numeric listed when U add a new entry in. U can create a link with a definition which easier to read without a blockquote used. Yeah, All is your choice now!!! Let’s try!!!




    ....
    TABLE TAG.

    U know? Half of my page are using Table!!! Yeah I really mean it. I love to use table a lot because U can place it anywhere U want above, below, left, right, etc. Fun and easier to manage. Table Tag is simply to word processing table, it has row and column to place a text, image, whatever. Well, Let’s get start with Table tag and it contain, U will completely understand with an example again.


    ....
    . . .

    I might no need to explain, it’s open tag and close tag again, of course it won’t appear if U miss one of them. U must put both of them and cover everything in order to make your table appeared completely.


    ....
    …

    TR is Table Row, all stuff U want to put within a same row must stay between TR open tag and TR close tag so which refers to Table Column also stay between this tag. It a bit difficult to explain, Example will show U what a different between each tag.


    ....
    …

    Table Headline is fit to explain a TH tag, it is similar to TD tag but it automatically turn a text which in them to a Bold Format ( because it is Table Headline ) . How to use it will explain with TD tag just below.


    ....
    …

    Table Column is mostly use in Table because all contain will place in it. TD is two way tag again, don’t forget to put both of them correctly, one missing will effected a whole table!!!


    ....
    Understanding a Table Strategy

    When U first start to learn and create table yourself, U will face a little trouble in calculate a mount of row and table, I suggest that U should write down a real table on your paper so U won’t miscount a needed block. Remember that All 4 tags above is two way tag, missing one of them usually make your table invisible. will be a started tag and ended tag will cover each , TD tag will never cover a TR tag !!! Don’t forget this basic, because HTML will start to count a row first that’s why TR is always cover a TD tag!!! Well let’s start with a very basic example here,


    ....

    and














    1st Column 2nd Column
    1st Row 1st Row/1st Column 1st Row/2nd Column
    2nd Row 2nd Row/1st Column 2nd Row/2nd Column

    ....
    this 2X2 table will show a result look like this…

    1st Column 2nd Column
    1st Row 1st Row/1st Column 1st Row/2nd Column
    2nd Row 2nd Row/1st Column 2nd Row/2nd Column

    ....
    Mention each step in a source code that show a level of covered tag. Table will be the biggest, TR 2nd then TH and TD are in the middle of a tag. So it’s depend on how many Row and Column U want to create. Now it won’t look like a table because it didn’t have a BORDER yet, here is an Attribute to show a table border…

    U just add a TABLE word into your TABLE tag ( U also specific a border size by typing like this…TABLE=2, TABLE=5 for example ) Here is a result with an old example.


    ....

    1st Column 2nd Column
    1st Row 1st Row/1st Column 1st Row/2nd Column
    2nd Row 2nd Row/1st Column 2nd Row/2nd Column

    Well now this table is look like a normal table already, There are many attribute to add-on and make your table more flexible and interesting. I will list ‘em one by one with an example as usual.


    ....
    …

    Table Captions tell other what that table is all about, actually it just a option tag, U can even input your plain text to explain your table, personally I suggest U don’t need to use it, anyway I will explain it, maybe U love to use it, that’s your page. tag must goes inside tag just before a first it will contain the title of the table ( don’t forget to close it before start your rows ). Your source might look like this…

















    Example of Table Row and Column
    1st Column 2nd Column
    1st Row 1st Row/1st Column 1st Row/2nd Column
    2nd Row 2nd Row/1st Column 2nd Row/2nd Column

    U can tell your caption to come after or before your table by ALIGN it,
    a default, will appear before the table.
    , caption will comes after the table.
    Here is the result of a source code above.

    Sample of Table Row and Column
    1st Column 2nd Column
    1st Row 1st Row/1st Column 1st Row/2nd Column
    2nd Row 2nd Row/1st Column 2nd Row/2nd Column


    ....

    ALIGN again!!! U might know what is this for already, well For who doesn’t know align will allow U to specify your text or image to place exactly U want it to.
    ALIGN is for Horizontal Align : left, center, right.
    ALIGN=LEFT
    ALIGN=CENTER
    ALIGN=RIGHT
    VALIGN is for Vertical Align : top, center, bottom.
    VALIGN=TOP
    VALIGN=CENTER
    VALIGN=BOTTOM
    Well let’s see an example how they appear on a table.

    TOP/LEFT TOP/CENTER TOP/RIGHT
    CENTER/LEFT CENTER/CENTER CENTER/RIGHT
    BOTTOM/LEFT BOTTOM/CENTER BOTTOM/RIGHT

    WIDTH and HEIGHT

    This attribute is also very useful, U can specific a mount of pixel for your table, column. If U want your table to be fix to a page, for example, U can set it like this
    …….
    U also set them with a fix number like WIDTH=90 or HEIGHT=300. So it’s depend on what do U want it to appear. U also able to combine them nicely like a table just above, I create them with TD WIDTH=25% HEIGHT=50 ( 25% will separate an equal size into 3 parts when I set TABLE WIDTH=75%). Don’t forget that if U don’t fix the table size it will appear depend on which on is longest and highest so it would be better to fix your table nicely.


    ....

    TD and TH can be span by this attribute. For example U wan to create a heading and subheading with in a same column so U have to span a heading column together then U will got each column for a subheading. Here is an example for column span.









    MALE> FEMALE


    ....
    The Result is,

    GENDER
    MALE FEMALE

    ....
    U have to be careful when U span a column or row because it will effect other row and column so U have to decrease and make it equal so an error will not occur to your table. The Tip is more spanned cell created more careful needed, write down all of your table structure first so U don’t struck in a table!!!


    ....
    Well now U know everything about Table and List already, all U need is practice!!!! Knowledge isn’t help U to be good in HTML, just make U know more all U have to do is improving yourself. Don’t forget that everything can be putted in a Table, image, link, list, form, whatever. U can even make a look-like column to make your page more interesting!!!! Yes, It’s your turn now.

    Choose NEW Section

    1