Introduction :
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>
Html tutorials session 9:
Vertical Alignment :
Users can vertically align the position of data earlier by using the valign attribute. HTML5 has deprecated the valign attribute. The possible values of vertical alignment are as follows:
top
Vertically aligns the data within the cell at the top.
middle
Vertically aligns the data within the cell at the center.
bottom
Vertically aligns the data within the cell at the bottom.
To set the alignment with the style you can use the text-align attribute to specify the vertical alignment use the following syntax:
Syntax:
<td style= “text align: center; vertical align: middle”>
The style can also be applied to individual rows, cells, or to the entire table.
Code Snippet 6 demonstrates how to align the data vertically within the table using the style attribute.
Code Snippet 6:
<!DOCTYPE HTML>
<html>
<head>
<title>CelinaBatteries</title>
</head>
<body>
<table border=”1”>
<tr>
<th>Sr.No.</th>
<th>Product Id</th>
<th>Product Description</th>
</tr>
<tr>
<td style=”text-align: center; vertical-align: middle”>1 </td>
<td style=”text-align: center; vertical-align: middle”>P101 </td>
<td>1.5 Volts AA Ultra Alkaline</td>
</tr>
<tr>
<td style=”text-align: center; vertical-align: middle”>2 </td>
<td style=”text-align: center; vertical-align: middle”>M105 </td>
<td>9 Volts pp3 Super Alkaline</td>
</tr>
</table>
</body>
</html>
The text-align attribute is set to the value center, which specifies that the data within the rows are centrally aligned. The vertical-align is used to specify the vertical alignment in the table.
Margin Attributes
The data in a table might appear cluttered, which may affect the readability. This might make it difficult to comprehend data as the data. To overcome this issue, use the cell margin attributes.
Cell padding allows the user to control the look of the content on a page.
Padding: Padding is the amount of space between the content and its outer edge. For tables, padding is specified as a space between the text and the cell border. Suppose if the user wants to set the padding attribute for the individual cells then he/she can use the padding attribute in a style as follows:
<td style=”padding: 4px”>
Caption Element
The user can add a heading to a table in HTML. To specify the main heading for the table, use the <caption> element. The <caption> element defines a caption for the table. It is a sub-element of the <table> element. It must be present immediately after the <table> tag.
Unlike the <th> element that is used to specify a heading to an individual row or column, the <caption> element allows the user to specify a title for your entire table. There can be only one caption for a table.
Code Snippet 7 demonstrates how to specify a heading for a table.
Code Snippet 7:
<!DOCTYPE HTML>
<html>
<head>
<title>Travel Expense Report</title>
</head>
<body>
<table border=”1”>
<caption>Travel Expense Report</caption>
<tr>
<th> </th>
<th>Meals</th>
<th>Hotels</th>
<th>Transport</th>
</tr>
<tr>
<td>25-Apr</td>
<td>37.74</td>
<td>112.00</td>
<td>45.00</td>
</tr>
<tr>
<td>26-Apr</td>
<td>27.28</td>
<td>112.00</td>
<td>45.00</td>
</tr>
<tr>
<td>Totals</td>
<td>65.02</td>
<td>224.00</td>
<td>90.00</td>
</tr>
</table>
</body>
</html>
The code creates a table of border width of 1 pixel. The <caption> element that is used inside the <table> element specifies a caption to the entire table as Travel Expense Report.
Table Size and Width of a Column
The user can decide the size of the table based on his/her requirements while creating a Web site. The table size can be expanded when the user wants to add rows and columns in the table. The user can use the <style> section to set the default width for the table to 100% of the browser window.
For setting the width of a column in pixels, you can use style attribute in the <td> tag.
Code Snippet 8 demonstrates how to create a table with specific width for a column.
Code Snippet 8:
<!DOCTYPE HTML>
<html>
<head>
<title>Tables</title>
</head>
<body>
<h2>Table</h2>
<table border=”1”>
<tr>
<td style =”width: 200px”>Flowers</td>
<td style =”width: 80px”>Fruits</td>
</tr>
<tr>
<td style =”width: 200px”>Vegetables</td>
<td style =”width: 80px”>Trees</td>
</tr>
</table>
</body>
</html>
The code creates a table of border width of 1 pixel. The <style> element is used to set table width to 100%. The width of the columns is set by using the style attribute. Figure 9.8 displays the table size and column width.
Merging Table Cells
Suppose if the user wants to change the cells of a table to different height and width then colspan and rowspan attributes can be used. Consider a scenario, where the user wants to merge a cell into adjacent cells to the right-handside. The colspan attribute can be used to specify the number of columns to span. Similarly, the user can use the rowspan attribute to specify the number of rows.
Code Snippet 9 demonstrates creating a table having five columns and five rows, but many of the cells span multiple columns or rows.
Code Snippet 9:
<!DOCTYPE HTML >
<html>
<head>
<title>Favorite Destination</title>
</head>
<body>
<h2>Report</h2>
<table border=”1” width=”100%” height=”100%”>
<tr>
<td colspan=”2” rowspan=”2”>Results</td>
<td colspan=”3”>Range</td>
</tr>
<tr>
<td>18 to 20</td>
<td>25 to 50</td>
<td>over 50</td>
</tr>
<tr>
<td rowspan=”3”>Your favorite vacation destination</td>
<td>Dubai</td>
<td>25%</td>
<td>50%</td>
<td>25%</td>
</tr>
<tr>
<td>Bangkok</td>
<td>40%</td>
<td>30%</td>
<td>30%</td>
</tr>
<tr>
<td>Switzerland</td>
<td>30%</td>
<td>20%</td>
<td>50%</td>
</tr>
</table>
</body>
</html>
The code creates a table having a border of 1 pixel. It also creates a table with five columns and five rows and uses the colspan and rowspan attributes respectively.
Apply Borders by Using Styles
Users can use CSS for applying borders as it is the best reliable and flexible method. The user must select the CSS method for Web sites that will be active for many years as the old formatting methods will not be used in future. You can format the table by using style based border for <table> and <td> tags. To evaluate the attributes used are as follows:
The border-width attribute is used to control the thickness of the border and the values are specified in pixels.
The border-color attribute is used to control the color of the border and specifies the color by either name, or RGB value, or hexadecimal number.
The border-style attribute is used to control the line style. Users can choose between solid, dashed, groove, dotted, outset, ridge, inset, or none.
Suppose if the user wants to set all these attributes at one time then the user can use the border attribute and place the settings in the following order namely, width, color, and style respectively. The user can also format the sides of the border individually by replacing the border attribute with border-bottom, border-top, border-right, or border-left attribute. The user can apply these attributes to the entire table or individual cells and also create rules in the <style> area.
Tables for Page Layout
Nowadays, there are many new techniques used for developing attractive Web pages. Tables are used for structuring the content. In other words, tables are used by the user to organize the data in an appropriate manner.
With tables the user can arrange the data horizontally or vertically according to his/her requirements. Community Web sites such as Facebook has different page layouts, the user uses the navigation tabs to move from one page to another. Similarly, the look and feel of each page is different.
While accessing Web sites such as Yahoo, Rediff, and so on users can view that the home page is very informative with a number of links, images, and so on. Each and every Web site has their unique way of presenting data to their customers or users. Many Web sites use pop-ups for providing information to their customers.
Code Snippet 10 demonstrates a simple example of using table for structuring the content of a Web page.
<!DOCTYPE HTML>
<html>
<head>
<title>Page Layout </title>
</head>
<style>
#navlayout {
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc; }
#navlayout li {
float: left; }
#navlayout li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #069;
border-right: 1px solid #ccc; }
#navlayout li a:hover {
color: #c00;
background-color: #fff; }
</style>
<body>
<img src=”../Images/flowers.jpg” width=”133”
height=”100” alt=””
border=”0”>
<h1>Blossoms Gallery</h1>
<h5><i>The Best sellers for flowers since 1979</i></h5>
<navlayout>
<hr>
<ul id=”navlayout”>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>Contact Us</a></li>
<li><a href=”#”>About Us</a></li>
<li><a href=”#”> FAQs</a></li>
</ul>
</navlayout>
<table>
<tr>
<td>
<b>Flowers are now in stock! </b>
<i> We have just received a large shipment of flowers
with prices as low as $19. </i>
</td>
</tr>
</table>
</body>
</html>
The code creates a page layout for a Web site. The data is arranged in a tabular format and an embedded style is used for defining the style. The style is defined using the style element placed immediately after the <head> section.
Defining a style in this manner helps to reuse the style in the same Web page.
The style is set using the ID selector methodology and is identified as navlayout. This will enable to apply the style to the content of all those elements whose id attribute has been set to navlayout.
