To design Tables and List on a HTML page

0
812

As we know HTML is a tag based language, so we can draw tables and List also using tags. In our blog today we will use various tags to do the same.

Code Explanation:

We start by giving heading and creating a table.

The above code creates something which displays like the following

DEGIGNING OF TABLES AND LIST BOXES

TABLE 1
TABLE TITLE
COLUMN ACOLUMN B
DATA 1DATA 2
DATA 3 DATA 4
DATA 5 DATA 6


We can see in the above code that we have started by defining the tag table with a width of 200. There after we define the caption, no of columns and alignment. We then define respective table blocks with height and content.


Let us now create another table. We call it Table 2. We keep the Width as 400 and the border is 1.


The Out put will be the following

TABLE 2

TABLE TITLE
COLUMN A COLUMN B
DATA 1 DATA 2




Let us Conclude our the discussion on tables by creating another table with back ground color. The code will be like the following



The output is like the following

TABLE 3
COLUMN 1COLUMN 2
ROW 1 CELL 1ROW 1 CELL 2
ROW 2 CELL 1ROW 2 CELL 2








Lists

We now write a code of list which displays some groceries in a list




The Output is following of the un-ordered list. Please note the use of tag ul


List 1

Shopping List

  • Milk
  • Toilet Paper
  • cereal
  • Bread


Similarly an ordered list can be made using ol. See the code below


List 2

Goals

  1. Find a Job
  2. Get Money
  3. Move Out
  4. Find a Partner


Summary: By using Different type of tags we can draw different types of tables and list according to our requirement. We can change many attributes like background Color, Font Style etc.