Table - tr and td tags, Computer Engineering

Table, TR and TD Tags

Three tags form the essential ingredients for creating a table.

TABLE: This is the main tag. It tells the browser that a table follows. It has attributes such as size and border width.

TR: A TableRow defines a horizontal row which consists of TableData cells.

TD: This tag specifies an individual cell or block in a table row.

Hence a table is made up of rows, which in turn are made up of cells.

 

 

 

 

 

<--This---

----is----

----a----

---Table---

---Row-->

 

 

Cell

 

 

You are now ready to create some tables! We should stress that if you want to learn how to make quality HTML documents, then you will be spending your time well if you teach yourself tags. In our opinion best HTML editors to use for beginners are the text-based editors. These editors will force you to code HTML yourself. They don't attempt to do it for you. Once you are an expert, you can use many other tools to improve your productivity so that you don't have to hand code your pages.

Now let's start creating tables. The below illustration demonstrates some tables with different attributes.

< HTML>

<HEAD>

<TITLE> EXPERTSMIND.COM</TITLE>

</HEAD>

<BODY>

<!- - Table with border = 5 - - >

First: Table with border = 5

<TABLE BORDER=5>

<TR>

<TD>Bella</TD>

</TR>

</TABLE>

<!- - Table with width = 50%- - >

Second: Table with width = 50%

<TABLE BORDER=3 WIDTH=50%>

<TR>

<TD>Bella</TD>

</TR>

</TABLE>

<!- - Table with width = 50 - - >

Third: Table with width = 50

<TABLE BORDER=1 WIDTH=50>

<TR>

<TD>Bella</TD>

</TR>

</TABLE>

<!- - Table with height = 75 and align = center and valign=top - - >

Fourth: Table with height = 75 and align = center and valign=top -

<TABLE BORDER=3 WIDTH=100 HEIGHT=75>

<TR>

<TD ALIGN=CENTER>Bella</TD>

</TR>

</TABLE>

<!- - Table with an image- - >

Fifth: Table with an image

<TABLE BORDER=3>

<TR>

<TD ALIGN=LEFT VALIGN=MIDDLE><IMG SRC="image1.gif"

WIDTH=32

HEIGHT=32></TD>

</TR>

</TABLE>

<!- - A complete Table with different sized columns- - >

Sixth: A complete Table with different sized columns

<TABLE BORDER=3 WIDTH=300 HEIGHT=75>

<TR>

<TD WIDTH=60%>Bella</TD>

<TD WIDTH=20%>Eve</TD>

<TD WIDTH=20%>Tom</TD>

</TR>

<TR>

57

Advanced HTML

<TD>Roy</TD>

<TD>herry</TD>

<TD>Lee</TD>

</TR>

</TABLE>

</BODY>

</HTML>

2213_Table - tr and td tags.png

Figure: Tables with Different Attributes

In the first table BORDER attribute is given a value of 5. Default is no border i.e. border = 0.

When no sizes are specified, table is only as big as it needs to be, as displayed in first and third table in Figure. Specifying a table size is easy. Let's reduce the table size to 50% of browser window. See the output in second table in Figure. As you can see in the illustration there are two ways to specify table width. Every style has its uses. You can also change height of a table. Fourth table in Figure demonstrates the effect of changed height.

You can control where in the cell the data will appear. For this, we use the ALIGN attribute. In the fourth table in Figure, we have used a center alignment. In the similar manner, right and left can be used for right and left alignment correspondingly. Default value is ALIGN=left. This is the value that browser presumes if you haven't told it otherwise.

You can also control where data will appear vertically in a cell. For this, you specify VALIGN attribute. In the fourth table, we have used value center. You can also use bottom or top. Images can also be placed as well as manipulated in a table data cell. In the folder which contains document with the HTML code, substitute an IMG tag for text. This is demonstrated in the fifth table. You can also include size attributes with all your image tags. We won't go into the details here, though doing so makes it easier for the browser to display table and avoids any nasty little surprises when resizing the browser window, for instance.

Now, let's look at multiple rows. Suppose three more friends from across street see what is going on and want to be in your table. We think we would give them their own row. Every row can be assigned a different width for its columns. In sixth table we have used 60/20/20 as the relative percentage widths of the three columns. Last table demonstrates how to create a table with multiple rows and columns. WIDTH attributes in the first row carry over to the second row.

Posted Date: 8/28/2013 2:54:24 AM | Location : United States







Related Discussions:- Table - tr and td tags, Assignment Help, Ask Question on Table - tr and td tags, Get Answer, Expert's Help, Table - tr and td tags Discussions

Write discussion on Table - tr and td tags
Your posts are moderated
Related Questions
What is the means of communications between R/3 and external applications? The means of communication among R/2,R/3 and external applications is by the CPI-C handler or SAP Gat

what is Ambiguity in single inheritance

The function noise.m, now installed on ashland too, adds Gaussian, salt, uniform and pepper, additive or multiplicative noise to an image

Python implementation of a solver for the desert crossing, Python Programming #Minimum 100 words accepted#

Q. What is the dissimilarity between dynamic strain aging and strain aging? Answer:- Strain aging could be explains as "normal wear and tear" or the fatigue that is experi

Write a program to find the area under the curve y = f(x) between x = a and x = b, integrate y = f(x) between the limits of a and b. The area under a curve between two points can b

Draw the circuit diagram of Asynchronous decade counter and explain its working. Ans: To  design  a  circuit diagram of decade  asynchronous  counter  initially  we  dr

Application and Function Areas - artificial intelligence: Individual applications and function often drive "AI" research much more than the long term relative field described

What is the significance of Technical settings (specified while creating a table in the data dictionary)?  By specifying technical settings we can handle how database tables ar

i want to make final year project in wireless.please help me to decide the topic???????