Tables allow the user to view the data in a structured and classified format. Tables can contain any type of data such as text, images, links, and other tables. The user can create tables for displaying timetables, financial reports, and so on.
9.2. Creating and Formatting Tables
A table is made up of rows and columns. The intersection of each row and column is called as a cell. A row is made up of a set of cells that are placed horizontally. A column is made up of set of cells that are placed vertically.
The user can represent the data in a tabular format by using the <br />
element in HTML. The element divides the table into rows and the <table><tbody>
<tr><td>element specifies columns for each row. By default, a table does not have a border. The border attribute of the <br />
element specifies a border for making the table visible in a Web page.
Code Snippet 1 demonstrates how to create a table.
Code Snippet 1:
Table Headings
The user can specify the heading for each column in HTML. To specify the heading for columns in a table, use the <br />
<table><html>
<head>
<title>Languages</title>
</head>
<body>
<h2>
Main Languages</h2>
<table border="”1”">
<tr>
<td>English</td>
<td>German</td>
</tr>
<tr>
<td>French</td>
<td>Italian</td>
</tr>
</table>
</body>
</html><tbody>
<tr><th>element.
The text included within the </th><th>element appears in bold. Code Snippet 2 demonstrates how to create a table with a heading.
Code Snippet 2:
<html>
<head>
<title>List of Students </title>
</head>
<body>
<h2>
List of Students</h2>
<table border="”1”">
<tr>
<th>Name</th>
<th>Age</th>
<th>Place</th>
</tr>
<tr>
<td>Mark</td>
<td>17</td>
<td>Madrid</td>
</tr>
<tr>
<td>John</td>
<td>19</td>
<td>London</td>
</tr>
</table>
</body>
</html>
In this code, the <br />
element creates a table with a border of 1 pixel. The element specify column headings namely, Manufacturer, Model, and Price. The rowspan attribute of the element. The table content is center aligned by setting the value of the text-align attribute to center.
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<table><tbody>
<tr><th>element provides three column headings namely, Name, Age, and Place.
Colspan Attribute
The user might feel the need to span two or more cells while working with tables. Spanning refers to a process of extending a cell across multiple rows or columns. To span two or more columns, use the colspan attribute of the </th><td>and </td><th>elements.
The colspan attribute allows the user to span a cell along a horizontal row. The value of the colspan attribute specifies the number of cells across which a specific cell shall be expanded. Code Snippet 3 demonstrates how to create a table and span header cells across two cells vertically.
Code Snippet 3:
<html>
<head>
<title>Employee Details</title>
</head>
<body>
<h2>
Employee Details</h2>
<table border="”1”">
<tr>
<th colspan="”2”">IT</th>
<th colspan="”2”">Accounts</th>
</tr>
<tr>
<th>Name</th>
<th>Location</th>
<th>Name</th>
<th>Location</th>
</tr>
<tr>
<td>David</td>
<td>New York</td>
<td>John</td>
<td>London</td>
</tr>
<tr>
<td>Katthy</td>
<td>New Jersey</td>
<td>Peter</td>
<td>Los Angeles</td>
</tr>
</table>
</body>
</html>
The code creates a table with a border of 1 pixel. The </th><th>element specifies two column headings namely, IT and Accounts. Each of these header cells horizontally span across the two cells by setting the colspan attribute of the </th><th>element to 2. Each of these headings has two sub-headings namely, Name and Location, which specify the name and location of employees. The first and second rows display the details of the employees.
Rowspan Attribute
The rowspan attribute spans a data cell across two or more rows. It allows the user to span a data cell along a vertical column. Like the colspan attribute, the rowspan attribute can be used within the </th><td>and </td><th>elements. Code Snippet 4 demonstrates how to span a cell across multiple rows.
Code Snippet 4:
<html>
<head>
<title>Automobile Gallery</title>
</head>
<body>
<table border="”1”">
<tr>
<th>Manufacturer</th>
<th>Model</th>
<th>Price</th>
</tr>
<tr>
<th rowspan="”3”">Audi</th>
<td>A4</td>
<td>34.5</td>
</tr>
<tr>
<td>A5</td>
<td>42.6</td>
</tr>
<tr>
<td>A6</td>
<td>30.75</td>
</tr>
<tr>
<th rowspan="”2”">BMW</th>
<td>328i</td>
<td>28.25</td>
</tr>
<tr>
<td>530d</td>
<td>47.5</td>
</tr>
</table>
</body>
</html>
The code creates a table with a border width of 1 pixel. The three </th><th>elements within the </th></tr>
<tr><th>element combines the three rows of the Manufacturer column into a common brand namely Audi. The three different models and the respective prices of the Audi brand are displayed in three different rows. Similarly, the rowspan attribute of the </th><th>element combines the next two rows of the Manufacturer column into a common brand called BMW.
Horizontal Alignment
Alignment determines the representation of text along the left, right, or center positions. In HTML, by default, the data within the table is aligned on the left side of the cell. Sometimes, the user might need to align the data to some other position for improving the readability or focusing on some data. HTML5 has deprecated the align attribute.
The four possible values for setting the horizontal alignment are as follows:
left
Aligns the data within a cell on the left side. This is the default value for table content.
center
Aligns the data within the cell on the center. This is the default value for table headings.
right
Aligns the data within the cell on the right side.
justify
Aligns the data within the cell by adjusting the text at the edges.
To set the alignment with style you can use the text-align attribute to specify the horizontal alignment.
Code Snippet 5:
<html>
<head>
<title>Automobile Gallery</title>
</head>
<body>
<table border="”1”">
<tr>
<th>Sr.No.</th>
<th>Medicine Name</th>
<th>Price</th>
</tr>
<tr center="">
<td>1</td>
<td>Captopril</td>
<td>12.45</td>
</tr>
<tr center="">
<td>2</td>
<td>Ceftriaxone</td>
<td>6.94</td>
</tr>
<tr center="">
<td>3</td>
<td>Ciprofloxacin</td>
<td>56.21</td>
</tr>
</table>
</body>
</html>
The code aligns the data within the row using a style within the </th></tr>
<tr></tr>
</tbody></table>
</th></tr>
</tbody></table>
</td></tr>
</tbody></table>
No comments:
Post a Comment