Scanner class Methods in Java

on
0

Creating Tables in HTML

on

Tables

Tables in HTML are used to display important information in record format. Table represents the data as a spreadsheet.
A Table is an entity that is  made up of rows and columns.Rows are horizontal viewa and column are vertical views of tables. An intersection area of a row and column is known as cell.There are  certain tags that are used to create tables in html.

Table Tags

all table tags in HTML


Example: Lets create a table with one and four columns.
<html>
<head>
<title>Tables</title>
</head>
<body>
<table>
<tr>
<th>COLORS</th>
<td>Red</td>
<td>Green</td>
<td>Blue</td>
</tr>
</table>
</body>
</html>
Result:
Creating table in html

Table Data Tags <td>  acts as a containers within the table. They can contain all sorts of HTML elements, such as text, images,lists,other tables,and so on.

Table Border

Border makes something important.We use borders to highlight things. We can also use borders in tables to make the table look more attractive. 
Adding a border to HTML table is very easy . We can use border attribute within table tag. An attribute is a key=value pair, in which border is the key and value can be anything we want to give like, 1,2,3 and so on.

For Example:

<table border=

"1">
    // Remaining tags here
</table>
The HTML:
<html>
<head>
<title>Tables</title>
</head>
<body>
<table  border="3">
<tr>
<th>COLORS</th>
<td>Red</td>
<td>Green</td>
<td>Blue</td>
</tr>
</table>
</body>
</html>
Result:



Colspan

Colspan means you can span two or more cells.It means that you can set the length of column using colspan attribute within  <td> data tag.
 
For example:
<table>
<tr>
<td>green</td>
<td colspan="2">Blue</td>
</tr>
</table>
The HTML:
<html>
<head>
<title>Tables</title>
</head>
<body>
<table  border="3">
<tr>
<th>COLORS</th>
<td>Red</td>
<td>Green</td>
<td>Blue</td>
</tr>
<tr>
<td></br></td>
<td colspan="2"></br></td>
</tr>
</table>
</body>
</html>

Result:

colspan example in html

In above example, the second column of second row  is extended up to two columns of first row.

Rowspan

RowSpan spans the row up to some extent.It can add two or more rows, so the sell can be bigger then usual.  The rowspan attribute specifies the number of rows a cell should span.

Example:
<table>
<tr>
<td>Month</td>
<td rowspan="2">Year of birth</td>
</tr>
</table>
The HTML:
<html>
<head>
<title> Rowspan</title>
</head>
<body>
<table>
  <tr>
    <th>Month</th>
    <th>Date</th>
    <th>Year of birth</th>
  </tr>
  <tr>
    <td>January</td>
    <td>08</td>
    <td rowspan="2">1995</td>
  </tr>
  <tr>
    <td>February</td>
    <td>2</td>
  </tr>
</table>
</body>
</html>
Result:

rowspan example in html


Table Alignment and BackGround color

The alignment of table can be changed using align attribute within table tag. We can align table  in center,top or bottom. We can align table both vertically and horizontally. Aligning table vertically and horizontally will be discussed later.
Similarly, We can use bgcolor attribute to set the background color of the table. This attribute is also used within table tag. We can use  both the attributes in single table tag, as shown below.

For example,
<table align="center" bgcolor="pink">
</table>
The HTML:
<html>
<head>
<title>Tables</title>
</head>
<body>
<table align="center" bgcolor="pink">
<tr>
<th>COLORS</th>
<td>Red</td>
<td>Green</td>
<td>Blue</td>
</tr>
</table>
</body>
</html>
Result:

setting up bgcolor in table in html example

Note: You can set the bgcolor of cells individually using  bgcolor attribute within  <td> tags.Try it Yourself!

Comments

Post a Comment

If you have any doubt, ask here