HTML Tables

An HTML table is comprised of table rows and columns, much like Excel rows and columns. HTML tables are container elements which are used to hold text and other html elements. A table element consists of other HTML tags which are <table> tag, <tr> tag, <th> tag and <td> tag.

Table rows are defined with the <tr> tag. A table header is defined with the <th> tag. By default, table headings are bold and centered. A table cell is defined with the <td> tag.

HTML Table Syntax

<table style="width:100%">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Jackson</td>
<td>32</td>
</tr>
<tr>
<td>Larry</td>
<td>27</td>
</tr>
</table>

HTML Table Borders

CSS border property is used t set table borders. If you do not specify a border for the table, it will be displayed without borders.

Example

table, th, td {
border: 1px solid black;
}

CSS border-collapse property is used to collapse borders into one border.

table, th, td {
border: 1px solid black;
border-collapse: collapse;
}

HTML Table Cell Padding

Cell padding is used to specify the space between the cell content and its borders. CSS padding property is used to set cell padding.

Example

th, td {
padding: 15px;
}

HTML Table colspan Attribute

The colspan attribute is used to make a cell span more than one column.

Example

<table style="width:100%">
<tr>
<th>Student Name</th>
<th colspan="2">Cources Enrolled</th>
</tr>
<tr>
<td>Larry</td>
<td>Data Science</td>
<td>Computer Architecture</td>
</tr>
</table>

HTML Table rowspan Attribute

The rowspan attribute is used to make a cell span more than one row.

Example

<table style="width:100%">
<tr>
<th>Student Name</th>
<td>Larry</td>
</tr>
<tr>
<th rowspan="2">Cources Enrolled</th>
<td>Data Science</td>
</tr>
<tr>
<td>Computer Architecture</td>
</tr>
</table>

HTML Table Caption

The <caption> tag used to add a caption to a table.

Example

<table style="width:100%">
<caption>Cource Registeration</caption>
<tr>
<th>Student Name</th>
<th colspan="2">Cources Enrolled</th>
</tr>
<tr>
<td>Larry</td>
<td>Data Science</td>
<td>Computer Architecture</td>
</tr>
</table>

PHP Introduction

PHP is a server scripting language, and a powerful tool for making dynamic and interactive Web pages. PHP stands for Hypertext Preprocessor. It is a very popular and widely-used open source server-side scripting language to write dynamically generated web pages. PHP scripts are executed on the server and the result is sent to the web browser as plain HTML. PHP 7 is the latest stable release.

PHP has several advantages over other server side scripting languages.

Easy to learn

For beginner web programmers, PHP is often considered as the easier and preferable language to learn.

Open source

PHP is an open-source project which is developed and maintained by a worldwide community of developers who make its source code freely available to download and use.

Portability

PHP runs on various platforms such as Linux, Microsoft Windows, Mac OS etc. and it is compatible with almost all servers used today such Apache, IIS.

Fast

PHP scripts usually execute faster than those written in other scripting languages like ASP, Ruby, Python, Java, etc.

Vast Community

Since PHP is supported by the worldwide community, it is extremely easy to find help or documentation.

PHP File

PHP files are stored with “.php” extension. A PHP file can contain text, HTML, CSS, JavaScript, and PHP code. The PHP code is executed on the server and returned to the browser as plain HTML.

HTML Images

The <img> tag is used to define HTML images. Images are used to improve the design and the appearance of a web page.

HTML Images Syntax

<img src=”image-url”>

The src attribute specifies the URL of the image.

HTML Images Example

<img src=”my_image.jpg”>

The alt Attribute

The alt attribute provides an alternate text for an image, if the user for some reason cannot view it. The text should be a short description of the image.

<img src=”my_image.jpg” alt=”Profile Image”>

Image Sizes

The width and height attributes are used to define the image size. Also the style attribute can be used to specify the width and height of an image.

<img src=”my_image.jpg” alt=”Profile Image” width=”500″ height=”500″>
<img src=”my_image.jpg” alt=”Profile Image” style=”width:500px;height:500px;”>

Image as a Link

Images can be used as links. To use an image as a link, put the <img> tag inside the <a> tag.

<a href=”http://www.tutorialsgenie.com/scripting/html-tutorial/”>
<img src=”html-img.jpg” alt=”HTML tutorial” style=”width:50px;height:50px;border:0;”>
</a>

HTML Hyperlinks

HTML Hyperlinks allow users to click their way from page to page. You can click on a link and jump to another document.

HTML Hyperlinks Syntax

HTML <a> tag is used to define hyperlinks.

<a href=”target-url”>link text</a>

The href attribute specifies the destination address and the link text is the visible part.

HTML Hyperlinks Example

<a href=”http://www.tutorialsgenie.com/scripting/html-tutorial/”>HTML Tutorial</a>

Hyperlink Colors

You can set different colors for each state of the link. By default an unvisited link is underlined and blue, a visited link is underlined and purple and an active link is underlined and red.

Hyperlink Colors Example

a:link {
color: blue;
text-decoration: none;
}
a:visited {
color: pink;
text-decoration: none;
}
a:hover {
color: red;
text-decoration: underline;
}
a:active {
color: yellow;
text-decoration: underline;
}

Hyperlinks target Attribute

The target attribute specifies where to open the linked document which can be one of followings.
_blank – Opens the document in a new window or tab
_self – Opens the document in the same window/tab as it was clicked (this is default)
_parent – Opens the document in the parent frame
_top – Opens the document in the full body of the window

The target Attribute Example

<a href=”http://www.tutorialsgenie.com/scripting/html-tutorial/” target=”_blank”>Html Tutorial</a>

Hyperlink title Attribute

The title attribute specifies extra information about an element which is shown as a tooltip text when the mouse moves over the element.

Hyperlink title Attribute Example

<a href=”http://www.tutorialsgenie.com/scripting/html-tutorial/” title=”HTML tutorial for beginners”>Html Tutorial</a>