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.
No comments:
Post a Comment