HTML Tables

Html tables allows web designer to arrange data like text, images, links etc into rows and column. This space created by the intersection of rows and column is called cell

The html tables are created using the <table> tag in which

  • <tr> tag is used to create rows.
  • <td> tag is used to create data cells.
<html>
<body>
<table border=”red”>
<tr>
<td>Ankit</td>
<td>Prince</td>
</tr>
<tr>
<td>Me</td>
<td>You</td>
</tr>
</body>
</html>

Tableheading: Tableheading can be define using <th> tag. This tag may be used to replace <td> tag

<html>
<body>
<table border>
<tr>
<th>Ankit</th>
<th>Prince</th>
</tr>
</table>
</body>
</html>

Cellpadding and cellspacing Attribute

These attribute are used to adjust the white space in table cell. The cellspacing attribute define the width of between the border, while cellpadding represent the distance between cell borders and the content with in a cells

<html>
head>
<style>
table, th, td {border: 1px solid black;}
</style>
</head>
<body>
<table cellpadding=”10″>
<tr>
<th>Name</th>
<th>Contact</th>
</tr>
<tr>
<td>Ankit</td>
<td>98********</td>
</tr>
</table>
</body>
</html>

 

<html>
<head>
<style>
table, th, td {border: 1px solid black;}
</style>
</head>
<body>
<table cellspacing=”10″>
<tr>
<th>Name</th>
<th>Contact</th>
</tr>
<tr>
<td>Prince</td>
<td>99********</td>
</tr>
</table>
</body>
</html>

Column span and Row span

We used columnspan attribute if we want to merge two or more column into a single column similarly we used rowsapn if we want to merge two or more rows.

<html>
<head>
<style>
table, th, td {border: 1px solid black;}
</style>
</head>
<body>
<table>
<tr>
<th colspan=”2″>Information</th>
</tr>
<tr>
<td>Name</td>
<td>Ankit</td>
</tr>
<tr>
<td>Mobile</td>
<td>98********</td>
</tr>
</table>
</body>
</html>
<html>
<head>
<style>
table, th, td {border: 1px solid black;}
</style>
</head>
<body>
<table>
<tr>
<th>Name</th>
<th>Contact</th>
<th>Information</th>
</tr>
<tr>
<td>Ankit</td>
<td>98********</td>
<td rowspan=”2″>About</td>
</tr>
<tr>
<td>Prince</td>
<td>99********</td>
</tr>
</table>
</body>
</html>

Table Background

  1. Bgcolor: You can set background color for entire table for just one cell.
  2. Background: You can set background image for entire table or for one cell.
  3. Bordercolor: You can set border color for entire table or for all one cell.
  4. Table height and width: You can set and width using width and height attribute you can specify table width of height in term of pixels or in term of percentage (%) of available screen area.
  5. Tablehead: <thead>
    <thead>: To create a separate table header.
    <tfoot>: To create a separate table footer.
<html>
<head>
<style>
table, th, td {border: 2px solid black;}
</style>
</head>
<body>
<table>
<tr>
<th colspan=”2″><p style=”color: brown;font-size:18px;”>Information</p></th>
</tr>
<tr>
<td><p style=”color: red;font-size:18px;”>Name</p></td>
<td><p style=”color: blue;font-size:18px;”>Ankit</p></td>
</tr>
<tr>
<td><p style=”color: red;font-size:18px;”>Mobile</p></td>
<td><p style=”color: blue;font-size:18px;”>98********</p></td>
</tr>
</table>
</body>
</html>

Background Colour in Table Text

<div class=”well well-large well-square”>
<div class=”row”>
<div class=”col-xs-12 xs-background-gray-very-light”>
<div id=”divProductDetect”>
<div class=”hidden-xs”>
<div class=”col-sm-10 bottom-offset-small”><button id=”detectmyproduct_homepage” class=”btn btn-primary dellmetrics-detectmyprod” type=”button”>Submit Mail to Ankit</button>
</div>
</div>
</div>
<div id=”divider-ProductDetect”></div>
</div>
</div>
</div>

HTML Forms

Html forms are required when you want collect some data from the site visitor.

A forms will take input from the visitor and then post a to back and application such as CGI ASP Script, PHP Script, Java Script etc The back and application will perform required processing on the data based on define logic inside the application

HTML Form Control

There are different type of form control that we can used to collect data.

  1. Text input control
  2. Checkboxes control
  3. Radio button control
  4. Select box control
  5. File select control
  6. Hidden control
  7. Clickable button
  8. Submit and reset button

Text Input Control: There are three type of text used in form

  1. Single Links Text input Control: this control is used for item that require only one line for user input such as search boxes or names. They are created using html <input> tag
  2. Password Input Control: This is also single text input but a masks the character as soon as a user enters it. They are created using html <input> tag
  3. Multi Line Text Input Control: This is used when the user is required to give detail that may be longer then a single line or sentence. They are created using html <textarea> tag

Single Line

<html>
<body>
<form>
First Name:<input type=”text”name=”firstname”>
<br>
Last Name:<input type=”text”name=”lastname:>
</form>
</body>
</html>

Attributes: Following are the attribute for <input> tag also creating tag field

  1. Type: It indicate the type of input and for text input control it will be set to “text”.
  2. Name: used to give a name to the control which is sent to the server to be recognised and get one value.
  3. Value: This can be used to provide and initial value inside the control.
  4. Size: It allows to specify the width of the text input control in term of character.
  5. Maxlength: Allows to specify the max number of character a user can enter into the text box.

Password Input Control:

<html>
<body>
<form>
Username: <input type=”text” name=”user”>
<br>
Password: <input type=”password” name=”password”>
</form>
</body>
</html>

HTML Formatting

HTML Small Formatting

The HTML <small> element defines small text:

<!DOCTYPE html>
<html>
<body>
<h2>ANKIT <small>Prince</small> Apctips</h2>
</body>
</html>


HTML Marked Formatting

The HTML <mark> element defines marked or highlighted text:

<!DOCTYPE html>
<html>
<body>
<h2>Ankit <mark>Apctips</mark> Prince</h2>
</body>
</html>


HTML Deleted Formatting

The HTML <del> element defines deleted (removed) text.

<!DOCTYPE html>
<html>
<body>
<p>The del element represents deleted (removed) text.</p>
<p>My favorite color is <del>blue</del> red.</p>
</body>
</html>


HTML Subscript Formatting

The HTML <sub> element defines subscripted text.

<!DOCTYPE html>
<html>
<body>
<p>This is <sub>html</sub> view.</p>
</body>
</html>


HTML Superscript Formatting

The HTML <sup> element defines superscripted text.

<!DOCTYPE html>
<html>
<body>
<p>This is <sup>superscripted</sup> text.</p>
</body>
</html>

HTML Quotations

HTML <q> for Short Quotations

The HTML <q> element defines a short quotation.

Browsers usually insert quotation marks around the <q> element.

<!DOCTYPE html>
<html>
<body>
<p>This is written by Ankit.</p>
<p>My Email ID is <q>ankit@apctips.com</q></p>
</body>
</html>


HTML <blockquote> for Long Quotations

The HTML <blockquote> element defines a quoted section.

<!DOCTYPE html>
<html>
<body>
<p>My website is www.apctips.com</p>
<blockquote cite=”http://www.apctips.com/about/”>
It takes time to create a great about page, but it’s worth the effort
</blockquote>
</body>
</html>

 

HTML <address> for Contact Information

The HTML <address> element defines contact information (author/owner) of a document or article.

<!DOCTYPE html>
<html>
<body>
<p>(author/owner) of a document or article.</p>
<address>
Written by Ankit Kumar<br>
Visit us at: www.apctips.com<br>
</address>
</body>
</html>


HTML <cite> for Work Title

The HTML <cite> element defines the title of a work.

<!DOCTYPE html>
<html>
<body>
<p>The HTML cite element defines the title of a work.</p>
<p>This is logo of my website.</p>
<img src=”file:///C:/APCTips.jpg” width=”70″ height=”80″ alt=”APC Tips”>
<p><cite>This logo </cite> by Ankit. Designed in 2015.</p>
</body>
</html>


HTML <bdo> for Bi-Directional Override

The HTML <bdo> element defines bi-directional override.

<!DOCTYPE html>
<html>
<body>
<p>My Name is Ankit (rtl):</p>
<bdo dir=”rtl”>My Name is Ankit</bdo>
</body>
</html>

HTML Computercode

HTML <code> For Computer Code

To fix this, you can put the <code> element inside a <pre> element:

<!DOCTYPE html>
<html>
<body>
<p>The code element does not preserve whitespace and line-breaks.</p>
<p>To fix this, you can put the code element inside a pre element:</p>
<pre>
<code>
var x = 5;
var y = 6;
document.getElementById(“demo”).innerHTML = x + y;
</code>
</pre>
</body>
</html>

 

HTML <var> For Variables

The HTML <var> element defines a variable.

The variable could be a variable in a mathematical expression or a variable in programming context:

<!DOCTYPE html>
<html>
<body>
<p>Einstein wrote: <var>E</var> = <var>m</var><var>c</var><sup>2</sup></p>
</body>
</html>

HTML CSS

Internal Styling (Internal CSS)

Internal styling is used to define a style for one HTML page.

Internal styling is defined in the <head> section of an HTML page, within a <style> element:

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: lightgrey;}
h1   {color: blue;}
p    {color: green;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>


The CSS Box Model

The CSS margin property defines a margin (space) outside the border:

<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 1px solid grey;
padding: 10px;
margin: 5px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</body>
</html>

LEAVE A REPLY

Please enter your comment!
Please enter your name here