How to Change Table Height in JavaScript
Tables are elements located in a website used to format the layout of images and text. When you place a table on your web page, you set a size. The size is set in the width and height properties of the HTML element. You can dynamically size an HTML table using Javascript. This can be placed in a script block of the web page, so when users view your website, the table changes size dynamically.
Other People Are Reading
Instructions
-
-
1
Open the web page you want to edit in a text editor. You can use something as simple as Notepad or more advanced software like Visual Studio.
-
2
Enter the "<script>" tag within an area of the web page. Many designers place the Javascript code for a page within the "<head>" tag, which is located at the top of the code. Place this code within the tag:
<script language="JavaScript"></script> -
-
3
Use the Javascript function "getElementByID" to retrieve the table object and set its height. The table ID is seen in the "<table>" tag in your HTML code. The ID used in the Javascript code needs to match, or this function will fail. The code below retrieves a table named "my_table" and sets the height to 300 pixels.
<script language="JavaScript">
document.getElementById("my_table").height = 300;
</script> -
4
Use Javascript to change the width. In most applications, the programmer changes the width along with the height. The same function and method is used to change the width of the table. This code is below:
<script language="JavaScript">
document.getElementById("my_table").width = 300;
</script> -
5
Save the web page and open it using your browser. As soon as you open the page, the table's height and width dynamically change.
-
1
References
More Like This
Comments
-
hello! i have another problem: i want to change the height of my side bar as long as the text in the center of page is, it mean when I have for ex 3 news in a page the side bar which have a background color must be increase to fit the long of text(3 news).
