HTML – TABLES

HTML table are used to arrange the data into tabular data. that is-,images, links, text display via a two-dimensional data table.

HTML table is defined with the <table> tag. Each table row is defined with the <tr> tag. A table header is defined with the <th> tag. By default, and <td> tag is used to create data cells.

Example

<!DOCTYPE html> 
<html>
<head>
<title>HTML Tables</title>
</head>
<body>
<table >
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>

HTML Table – Adding a Border

The table border attribute could accept two values: 0 for no borders and 1 to display borders around table cells.

header is defined with the <th> tag. By default, and <td> tag is used to create data cells.

Example

<!DOCTYPE html> 
<html>
<head>
<title>HTML Tables</title>
</head>
<body>
<table border="1">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>

Cell Padding

Cell padding means the space between the cell content and its border. if you don’t specify a cell padding the table will take default value.

Cell spacing

Cell spacing means the space between the cell to cell . if you dont specify a cell padding the table will take default value.

<!DOCTYPE html> 
<html>
<head>
<title>HTML Table Cellpadding</title> </head>
<body>
<table border="1" cellpadding="5" cellspacing="5"> >
<tr>
<td>Name </td>
<td>Amount</td>
</tr>
<tr>
<td>a</td>
<td>2000</td>
</tr>
<tr>
<td>b</td>
<td>1500</td>
</tr>
<tr>
<td>c</td>
<td>1400</td>
</tr>
</table>
</body>
</html>

Col span and Row span

You will use colspan attribute if you want to merge two or more columns into a single column. Similar way you will use rowspan if you want to merge two or more rows.

<!DOCTYPE html>
<html>
<head>
<title>HTML Table Colspan/Rowspan</title>
</head>
<body>
<table border="1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr><td rowspan="2">Row 1 Cell 1</td><td>Row 1 Cell 2</td><td>Row 1 Cell
3</td></tr>
<tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr>
<tr><td colspan="3">Row 3 Cell 1</td></tr>
</table>
</body>
</html>

Table Caption

caption tag will serve as a title or explanation for the table and it shows up at the top of the table. This tag is deprecated in newer version of HTML/XHTML.

<!DOCTYPE html> 
<html>
<head>
<title>HTML Table Caption</title>
</head>
<body>
<table border="1" width="100%">
<caption>This is the caption</caption>
<tr>
<td>row 1, column 1</td><td>row 1, column 2</td>
</tr>
<tr>
<td>row 2, column 1</td><td>row 2, column 2</td>
</tr>
<table></body></html>

RECENT POSTS

Firefox CSS Hacks

admin
Wednesday, May 15th, 2019

Top 15 Web Design Trends 2018

admin
Friday, May 3rd, 2019