HTML is a versatile language, even if the implementation makes it somewhat limited. It has been used extensively to distribute information over the Internet. One of the key elements in HTML is the table. This article focuses on how to adjust the height of rows in tables using HTML.
slide 1 of 4
Introduction to HTML Tags and Attributes
HTML does not fall neatly into the category of a programming language. HTML statements are instructions which tell the browser how to display text. The processing is minimal, and usually has to be introduced via the employment of dynamic scripting languages.
The method used for marking up the text is a combination of tags and attributes. Tags, which are often in pairs, are indicated as instructions by the opening and closing angle brackets. These brackets then instruct the browser to interpret the succeeding text in a certain manner. Attributes are used to assign characteristics to text. They are strongly dependent on tags, as the attributes are unique to different HTML elements.
For example, to create a table in HTML, the <TABLE> and </TABLE> tag pair would be used. If the background color was to be set to blue, the attribute for color would be placed inside the <TABLE> tag, indicating only the background of the table should be blue.
slide 2 of 4
Setting the Height Attribute
The first method of setting table row height using HTML involves creating tables. Each row in the table is defined using the <TR> and </TR> tag pair, and each data item is identified using the <TD> and </TD> tag pair. Each pair of tags has their own set of attributes, including ones to set the height and width of the individual table cell.
The height attribute takes one of two kinds of values: either number of pixels, or a percentage of the entire table. The first option is recommended, as the height of the table is a relative measurement that is prone to unpredictable interpretation by various browsers.
<TABLE id="table1" width="350" border="5">
<TD height="50">Data 1.1</TD>
<TD> Data 1.2</TD>
<TD> Data 1.3</TD>
<TD> Data 2.1</TD>
<TD> Data 2.2</TD>
<TD> Data 2.3</TD>
It is possible to assign a different height to each cell individually. However, to maintain the integrity of the table, the largest height size will be used by the browser. Additionally, sometimes the attribute will not be parsed correctly by the browser, in which case some sort of dynamic scripting must be used to adjust it.
slide 3 of 4
var tablerows = document.getElementById('table1').rows
The function ‘adjustrowheight’ is called from within the HTML page. Once called, it creates an array of variable ‘tablerows’ which are then used to store each of the rows in the table.
‘Document’ is a global variable that is predefined and refers to the web page. It has a number of specific functions, one of which is ‘getElementById’. The rows characteristic extracts the table rows and stores them in the array variable.
The second line of code indicates that the first row height must be set to 100 pixels. It is possible to create a loop to increase the heights of all the rows in the table.
slide 4 of 4