Table - tr and td tags, Computer Engineering

Assignment Help:

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.


Related Discussions:- Table - tr and td tags

User interface (ui), Design a easy (text-based/ graphical) UI for  your pr...

Design a easy (text-based/ graphical) UI for  your program.  The user should be encouraged for  parameter values for  the particular protocol simulation. For  example, the user sho

Non-repudiation achieved in designing e-cash based system, How can non-repu...

How can non-repudiation be achieved into designing e-cash based system? E-cash is fundamentally an online solution. The buyer should validate the coins by the issuer so as to g

How are devices represented in unix, How are devices represented in UNIX? ...

How are devices represented in UNIX? All devices are shown by files called special files that are located in /dev directory. Therefore, device files and other files are named a

Data packets - universal serial bus, Data packets: A data packet consi...

Data packets: A data packet consists of the PID which is followed a 16-bit CRC and by 0-1023 bytes of data payload (up to 1024 in high speed and at most 8 at low speed) The

Explain the following the address instruction, Explain the following the ad...

Explain the following the address instruction?  Three-address instruction-it can be represented as add a,b,c Two-address instruction-it can be shown as Add a,b

Logical user-centered interactive design methodology, Question: Logical...

Question: Logical User-Centered Interactive Design Methodology is a methodology that identifies six clear stages to help in software development while keeping the user in mind.

Explain scripts and libraries introduction, Scripts A script within Rati...

Scripts A script within Rational Robot is a file that haves a sequence of SQABasic code. The extension of the file is always ".REC". Typically the script have an automated testc

Design issues of multi-threaded processors, Q. Design issues of Multi-threa...

Q. Design issues of Multi-threaded processors? To accomplish the maximum processor utilization in a multithreaded architecture, the subsequent design issues should be addressed

Describe about micro-controllers, Q. Describe about Micro-controllers? ...

Q. Describe about Micro-controllers? Micro-controllers: These are a specialized device controlling computer which comprises every function of computers on a single chip. Chip

Extra variables by which customers call for work to work out, What are the ...

What are the extra variables by which customers call for to work out? All customers who do not purchase Internet connectivity through a Service Provider do call for to work out

Write Your Message!

Captcha
Free Assignment Quote

Assured A++ Grade

Get guaranteed satisfaction & time on delivery in every assignment order you paid with us! We ensure premium quality solution document along with free turntin report!

All rights reserved! Copyrights ©2019-2020 ExpertsMind IT Educational Pvt Ltd