Pin Me

How to Adjust the Height of Rows in HTML Tables

written by: Karishma Sundaram•edited by: Michele McDonough•updated: 6/16/2010

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.

    Example:

    <TABLE id="table1" width="350" border="5">

    <TR>

    <TD height="50">Data 1.1</TD>

    <TD> Data 1.2</TD>

    <TD> Data 1.3</TD>

    </TR>

    <TR>

    <TD> Data 2.1</TD>

    <TD> Data 2.2</TD>

    <TD> Data 2.3</TD>

    </TR>

    </TABLE>

    Table Example 

    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

    Using JavaScript

    Dynamic scripting can be used to accomplish a number of various tasks in HTML. Therefore, JavaScript can be used to adjust the height of rows in tables as well. The code can be written in any number of ways. Check out the simple example below, which creates the same table described in the earlier example:

    <SCRIPT type="text/javascript">

    function adjustrowheight()

    {

    var tablerows = document.getElementById('table1').rows

    tablerows[0].height="100"

    }

    </SCRIPT>

    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

    Conclusion

    Setting table row height using HTML is easy to do using HTML tags or JavaScript. It is often best to let the browser adjust the table height arbitrarily, as not all browsers interpret HTML code in the same fashion. However, in the case of precise formatting, being able to adjust table row heights would become a useful tool.