Scribd
Upload
51 views

Working With Tables in HTML

The document discusses HTML tables, including how they are defined using <table>, <tr>, and <td> tags. Tables can be used to organize and display tabular data on a web page. Various table attributes are described, such as border, cellpadding, cellspacing, colspan, and rowspan, which allow formatting and layout of table cells. The document also covers setting table widths/heights, using thead/tbody/tfoot to define table sections, and nesting one table within another table's cells.

Uploaded by

vvanshika005
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
51 views

Working With Tables in HTML

The document discusses HTML tables, including how they are defined using <table>, <tr>, and <td> tags. Tables can be used to organize and display tabular data on a web page. Various table attributes are described, such as border, cellpadding, cellspacing, colspan, and rowspan, which allow formatting and layout of table cells. The document also covers setting table widths/heights, using thead/tbody/tfoot to define table sections, and nesting one table within another table's cells.

Uploaded by

vvanshika005
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 7

Working with Tables

HTML table tag is used to display data in tabular form (row * column). There can be many
columns in a row. Tables are an excellent way to organize and display information on a page.
Tables are defined using the <table>tag.A table is divided into rows with the <tr> tag, and each
row is divided into data cells using the <td> tag. The letters td stand for “table data,” which is
the content of a data cell. A data cell can contain text, images, lists, paragraphs, forms,
horizontal rules, tables, and so on.Table headings are defined with the <th> tag.

Table Tags
Tags Description
<table> Defines a table
<th> Defines a table header
<tr> Defines a table row
<td> Defines a table cell data(or table data)
<caption> Defines a table caption
<thead> Defines a table head
<tbody> Defines a table body
<tfoot> Defines a table footer

<!DOCTYPE>

<html>

<body>

<table>

<tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>

<tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr>

<tr><td>James</td><td>William</td><td>80</td></tr>

<tr><td>Swati</td><td>Sironi</td><td>82</td></tr>

<tr><td>Chetna</td><td>Singh</td><td>72</td></tr>

</table>

</body> </html>

Output:

First_Name Last_Name Marks

Sonoo Jaiswal 60

James William 80

Swati Sironi 82

Chetna Singh 72
HTML Table - Add a Border

The border is an attribute of <table> tag and it is used to put a border across all the cells.

<!DOCTYPE>
<html>
<body>
<table border="1">
<tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>
<tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr>
<tr><td>James</td><td>William</td><td>80</td></tr>
<tr><td>Swati</td><td>Sironi</td><td>82</td></tr>
<tr><td>Chetna</td><td>Singh</td><td>72</td></tr>
</table>
</body>
</html>

Table Heading

Table heading can be defined using <th> tag. This tag will be put to replace <td> tag, which is
used to represent actual data cell.

<!DOCTYPE html>
<html>

<head>
<title>HTML Table Header</title>
</head>

<body>
<table border = "1">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>

<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>

</html>

This will produce the following result −

Cellpadding and Cellspacing Attributes

There are two attributes called cellpadding and cellspacing which you will use to adjust the
white space in your table cells. The cellspacing attribute defines space between table cells, while
cellpadding represents the distance between cell borders and the content within a cell.

<!DOCTYPE html>
<html>

<head>
<title>HTML Table Cellpadding</title>
</head>

<body>
<table border = "1" cellpadding = "5" cellspacing = "5">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>

</html>

Colspan and Rowspan Attributes

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>

Tables Backgrounds

You can set table background using one of the following two ways −

 bgcolor attribute − You can set background color for whole table or just for one cell.
 background attribute − You can set background image for whole table or just for one cell.

You can also set border color also using bordercolor attribute.

<!DOCTYPE html>
<html>

<head>
<title>HTML Table Background</title>
</head>

<body>
<table border = "1" bordercolor = "green" bgcolor = "yellow">
<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 Height and Width

You can set a table width and height using width and height attributes. You can specify table
width or height in terms of pixels or in terms of percentage of available screen area.

<!DOCTYPE html>
<html>

<head>
<title>HTML Table Width/Height</title>
</head>

<body>
<table border = "1" width = "400" height = "150">
<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>

This will produce the following result −

Table Header, Body, and Footer

Tables can be divided into three portions − a header, a body, and a foot. The head and foot are
rather similar to headers and footers in a word-processed document that remain the same for
every page, while the body is the main content holder of the table.

The three elements for separating the head, body, and foot of a table are −
 <thead> − to create a separate table header.
 <tbody> − to indicate the main body of the table.
 <tfoot> − to create a separate table footer.

<!DOCTYPE html>
<html>

<head>
<title>HTML Table</title>
</head>

<body>
<table border = "1" width = "100%">
<thead>
<tr>
<td colspan = "4">This is the head of the table</td>
</tr>
</thead>

<tfoot>
<tr>
<td colspan = "4">This is the foot of the table</td>
</tr>
</tfoot>

<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</tbody>

</table>
</body>

</html>

Nested Tables

You can use one table inside another table. Not only tables you can use almost all the tags inside
table data tag <td>.

<!DOCTYPE html>
<html>

<head>
<title>HTML Table</title>
</head>

<body>
<table border = "1" width = "100%">

<tr>
<td>
<table border = "1" width = "100%">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</td>
</tr>

</table>
</body>

</html>

Advantages of Tables

1. nicely aligned data


2. vertical align: middle
3. tables provide the illusion that text, numbers abd images can be positioned independently
anywhere on a web page.
4. A variety of attributes can be applied on the tables and cells including different shades,
applying or hiding borders, changing cell size, spacing and padding , the empty space
around the cell.

Disadvantages

1. lots of coding and the need to keep track of the number of rows and columns so some data
can span over multiples.
2. You can only squeeze in a small number of columns before the table width causes
horizontal scrolling on smaller screens.
3. Making columns narrow to prevent horizontal scrolling will decrease readability of the
text .
4. Page rendering is slowed.
5. Page size is increased the same content displayed without a table.

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy