September 08, 2012

HTML Table Border

First before we start in our tutorial what is a table border in our HTML? Table border is use in spreading sheet or we can use in by alignment in our html. Table spreading sheet we are seen now in the Microsoft Office excel and there is now a good formatting line like:

Table Row

Table column

Merging table


In HTML we need to use a <TABLE> tag.
By using < TABLE> this tag is creating table in our html and there is one attribute about the <TABLE>tag and that is a BORDER attribute. The BORDER attribute is use to tell in our HTML what is the wide in our <TABLE> data, if we did not use this our browser will automatically sets to BORDER=0 our borders table we made.

So we are making now in our own table it will looks like this.
<TABLE BORDER=1>
</TABLE>

This table our starting point in our HTML and we are going to make a row line in our TABLE tag, To create a row in our TABLE must be use like this <TR> ,or table row tag.
For our Table column must be like this <TD> or our table data tag.

This two tag are use to make our line and how many line we put in the table row and the column table.
Let start to make a Table border with using table row with columns, we use like this in our HTML,
For a table we put it 4 rows and 4 columns.

========================================================================
<TABLE BORDER=1>
<TR><TD>Row 1, Col 1 <TD>Row 1, Col 2 <TD>Row 3, Col 3<TD>Row 4, Col 4</TR>
<TR><TD>Row 2, Col 1 <TD>Row 2, Col 2 <TD>Row 3, Col 3<TD>Row 4, Col 4</TR>
<TR><TD>Row 3, Col 1 <TD>Row 2, Col 2 <TD>Row 3, Col 3<TD>Row 4, Col 4</TR>
</TABLE>

 Our table looks like this.

Row 1, Col 1 Row 1, Col 2 Row 3, Col 3Row 4, Col 4
Row 2, Col 1 Row 2, Col 2 Row 3, Col 3Row 4, Col 4
Row 3, Col 1 Row 2, Col 2 Row 3, Col 3Row 4, Col 4
========================================================================


If we are putting our TABLE putting header tag we must put <TH> for TABLE HEADER look like our code like this.

========================================================================

<TABLE BORDER=1>
<TR><TH>Header</TR>

<TR><TD>Row 1, Col 1 <TD>Row 1, Col 2 <TD>Row 3, Col 3<TD>Row 4, Col 4</TR>
<TR><TD>Row 2, Col 1 <TD>Row 2, Col 2 <TD>Row 3, Col 3<TD>Row 4, Col 4</TR>
<TR><TD>Row 3, Col 1 <TD>Row 2, Col 2 <TD>Row 3, Col 3<TD>Row 4, Col 4</TR>
</TABLE>


In our browser preview looks like this.

Header
Row 1, Col 1 Row 1, Col 2 Row 3, Col 3Row 4, Col 4
Row 2, Col 1 Row 2, Col 2 Row 3, Col 3Row 4, Col 4
Row 3, Col 1 Row 2, Col 2 Row 3, Col 3Row 4, Col 4

========================================================================

So we are now made our TABLE border in our HTML, you can use this in a manual method by using notepad but I know you are tired doing this things right? because we have now a  good software application for making website and sometimes we are making only our website but doesn't know what is the formula inside in the HTML but it is ok we have different line how to make our own website or Html pages.

This tutorial I shared for my connecting family that like to be learn and to know the basic code tag in the Html.
I know there is someone out there willing to be learn and they are searching for the basic method in the Html that's why I made this for you that you can get some Idea how to make your own Table border and putting to your pages website.


Hope this tutorial can help you for the future.


Next to HTML Marquee Tag Direction
Return to:

If you like to see our Flash template Design/Template Page goes here:
See all: Our Template

No comments:

Post a Comment

Share Us

| Guideinfoyou (Guideline and Learning tactics) © 2008- 2014 w/blogger. All Rights Reserved | Designed by Virgil R. Toling Jr |