Scribd
Upload
3 views8 pages

13 - 48 - 35 - 4 - 05 - 2025 - Module 2

This document provides an overview of creating HTML tables, including the use of various tags such as `<table>`, `<tr>`, `<td>`, and `<th>`, as well as styling options like borders and alignment. It also introduces forms and form elements, detailing how to collect user input with tags like `<input>` and `<textarea>`. Additionally, it explains the use of `<iframe>` for embedding external content within a webpage.

Uploaded by

Avyaan Tiwari
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
3 views8 pages

13 - 48 - 35 - 4 - 05 - 2025 - Module 2

This document provides an overview of creating HTML tables, including the use of various tags such as `<table>`, `<tr>`, `<td>`, and `<th>`, as well as styling options like borders and alignment. It also introduces forms and form elements, detailing how to collect user input with tags like `<input>` and `<textarea>`. Additionally, it explains the use of `<iframe>` for embedding external content within a webpage.

Uploaded by

Avyaan Tiwari
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 8

Module 2:

### **Creating Tables**

HTML tables are used to display data in a structured tabular format using the
`<table>` tag.

### **Table Element**

A table is created using:

```html

<table> ... </table>

```

Inside the table, you use:

* `<tr>` for Table Row

* `<td>` for Table Data Cell

* `<th>` for Table Header Cell

### **Adding Border**

Borders can be added using the `border` attribute or CSS:

```html
<table border=”1”>

```

Or with CSS:

```css

Table, th, td {

Border: 1px solid black;

```

### **Adding Column Headings**

Use the `<th>` tag inside `<tr>` to define headings:

```html

<tr>

<th>Name</th>

<th>Age</th>

</tr>

```

### **Adding Spacing and Padding**

* `cellspacing`: Space between cells (deprecated in HTML5).

* `cellpadding`: Space inside cells (use CSS instead).


CSS Example:

```css

Td {

Padding: 10px;

```

### **Adding a Caption**

The `<caption>` tag provides a title for the table:

```html

<table>

<caption>Student Marks</caption>

</table>

```

### **Setting Table Width and Height**

You can set width and height via attributes or CSS:

```html

<table width=”100%” height=”200px”>

```

### **Adding Row Headings**


Row headings are usually placed in the first column using `<th>`:

```html

<tr>

<th>Subject</th>

<td>Math</td>

</tr>

```

### **Aligning Cell Contents**

Text alignment using:

```html

<td align=”center”>Centered</td>

```

Or via CSS:

```css

Td {

Text-align: center;

Vertical-align: middle;

```
### **Setting Column Width**

Column widths can be set with CSS or `<col>` tag:

```html

<td style=”width: 150px;”>Data</td>

```

### **Centering a Table**

Use CSS `margin`:

```html

<table style=”margin: auto;”>

```

### **Inserting an Image**

Use the `<img>` tag inside a cell:

```html

<td><img src=”image.jpg” alt=”Image” width=”100”></td>

```

### **Spanning Columns (colspan)**

Combine multiple columns:


```html

<td colspan=”2”>Spans two columns</td>

```

### **Spanning Rows (rowspan)**

Combine multiple rows:

```html

<td rowspan=”2”>Spans two rows</td>

```

### **Assigning Background Colors**

Using `bgcolor` or CSS:

```html

<td style=”background-color: lightblue;”>Data</td>

```

## **Introduction to Forms and Form Elements**

Forms collect user input and are created using the `<form>` tag.

### **Form Elements Include:**


* `<input>`: Various input types like text, checkbox, radio, password.

* `<textarea>`: Multi-line text input.

* `<select>` and `<option>`: Drop-down list.

* `<label>`: Label for form elements.

* `<button>` or `<input type=”submit”>`: Submit the form.

Example:

```html

<form action=”submit.php” method=”post”>

<label for=”name”>Name:</label>

<input type=”text” id=”name” name=”name”>

<input type=”submit” value=”Submit”>

</form>

```

## **Introduction to Iframes**

The `<iframe>` tag is used to embed another webpage within the current
page.

### **Syntax:**

```html

<iframe src=https://example.com width=”600” height=”400”></iframe>


```

Iframes are commonly used to embed maps, videos (like YouTube), or


external content.

---

You might also like