We use the tag, to create a table with caption in HTML. The caption tag will be inserted immediately after the tag. We can add only one caption for one table. By default, the alignment of this tag is center. We can change the alignment using CSS property called align. Syntax Following is the syntax of the caption tag of HTML Caption of the table... Example 1 In the following example we are creating a table with employee name and employee id with Employees as the caption. DOCTYPE html> ... Read More
We use border-collapse property to create a collapsed border in HTML. The border-collapse is a CSS property used to set the table borders should collapse into a single border or be separated with its own border in HTML. Border-collapse property has four values: separate, collapse, initial, inherit. With the value collapse If you pass collapse as a value of the border-collapse Property, the borders of the table are simply collapsed into a single border. Following is the syntax to create a collapsed border in HTML. border-collapse: collapse; Example 1 In the example given below we are trying to ... Read More
Tables in HTML can have horizontal header and vertical header. For the horizontal header, we need to set all inside a single tag. Syntax Following is the syntax to set horizontal header for a table − horizontal header1… horizontal header2… Example 1 Now let us see an example program to set horizontal header for a table. DOCTYPE html> table, tr, th, ... Read More
The tables can be used to create and structurize forms in HTML. But, before that let us see how to create a form in HTML. Create a Form in HTML Example Let us see how to create a form using the tags. We have set three input type radio with individual labels − DOCTYPE html> HTML Form Details Select the subject you want to choose: ... Read More
The default margin is 8px in HTML. It is defined in pixels by the user-agent-stylesheet your browser provides. Some browsers allow you to create and use your own user-agent-stylesheet, but if you are developing a website, keep it the same. Default Margin in HTML Example Let us see a simple example. Here, since the default margin is 8px, we won’t try to change it − DOCTYPE html> Example body { background: orange; ... Read More
Use the enctype attribute to specify how the browser encodes the data before it sends it to the server. Possible values are − application/x-www-form-urlencoded − This is the standard method most forms use in simple scenarios. mutlipart/form-data − This is used when you want to upload binary data in the form of files like image, word file etc. Example Let us now see an example − DOCTYPE html> HTML enctype attribute form { ... Read More
The footer as the name suggest remains fixed in the bottom of the web page. For example, in the following page, we have a fixed footer in the bottom i.e. the footer remains even when the page is scrolled above − To create a footer that stays in the bottom and fixed, we will use CSS. Set the footer to stay at the bottom of a Web page using the position property Set the footer to stay at the bottom of a Web page using the position CSS property. The footer height, background color, and text color is set ... Read More
To affect other elements when one element is hovered, an element should be inside another element i.e. parent-child or sibling. On placing the mouse cursor on one element, the other’s property should change i.e. the hover affect is then visible. Change the color of another element when one element is hovered Example In this example, we will change the color of two boxes inside a div on mouse hover − DOCTYPE html> .parent { width: 500px; ... Read More
The className property is used to change an element’s class. Here, we will see two examples − How to change the element’s class using className property. How to toggle between old and new classes. Change the element’s class using className property In this example, we will change the class of an element using the className property. Let’s say we have a div with class oldStyle − The div... We will set the above oldStyle class to a new class i.e. newStyle using the className property − function demoFunction() { ... Read More