Method of creating table using HTML.pptx

Creation of Table
using HTML
By,
Rajavalli K
II MBA

HTML Table
Structure
 In HTML, a table is a structured way to
display data in rows and columns.
 <table>: This tag defines the start and end of
a table. All the rows and data inside the table
are enclosed within the <table> tag.
 <tr>: This stands for table row and is used to
define a single row in the table. Each row is
made up of one or more cells.
 <td>: This stands for table data and is used to
create a cell in the table, which can contain
regular content, such as text or images. Each
<td> tag defines one cell in the row.
 <th>: This stands for table header and is used
to create a cell in the table that acts as a
header. The content inside <th> tags is
usually bold and centered by default.

Example
 Example:
<table>
<tr>
<th>Day</th>
<th>Period 1</th>
<th>Period 2</th>
<th>Period 3</th>
</tr>
<tr>
<td>Monday</td>
<td>Math</td>
<td>Science</td>
<td>English</td>
</tr>
</table>

colspan (Column
Span)
 Colspan: The attribute in HTML is
used to make a single table cell span
across multiple columns. This is
helpful when we want to merge cells
horizontally to create a larger cell that
covers several columns in a row.
 The colspan="number" attribute is
added to a <td> or <th> element to
specify how many columns the cell
should span across
 Example:
<tr>
<td colspan="3">Break</td>
</tr>

rowspan (Row
Span)
 Rowspan: The attribute in HTML is used
to make a single table cell span across
multiple rows. This is useful when you
want to merge cells vertically, creating a
larger cell that covers several rows in a
column.rowspan merges a cell across
multiple rows.
 The rowspan="number" attribute is
added to a <td> or <th> element to specify
how many rows the cell should span
 Example:
<tr>
<td rowspan="2">Lab</td>
<td>Physics</td>
</tr>
<tr>
<td>Math</td>
</tr>

colspec (Column
Specification)
 Colspec: the colspec (Column
Specification) element is used to define
the characteristics of columns in a table.
This includes column names,
numbering, spans, widths, and
alignment. Unlike HTML, Colspec is
used to manage columns in a more
structured and semantic way.
 Example:
<colspec colname=“demo1" colnum="1"/>
<colspec colname=“demo2" colnum="2"/>

align (Alignment
of Text in Cells)
 In HTML, the align attribute controls the
horizontal alignment of text or content
inside a table cell (<td> or <th>). It
allows you to align the content to the left,
center, or right within the cell.align
controls text alignment in cells.
 Possible Values for align:
 left: Aligns the content to the left
(default).
 center: Aligns the content to the
center.
 right: Aligns the content to the right.
Example:
<td align="center">Math</td>

border (Adding
Borders)
 Border: In HTML, the border
attribute is used to add borders
around the entire table, including its
cells and rows. The value of the
border attribute specifies the width
of the border in pixels.
 Example:
<table border="1">
<tr>
<td>Math</td>
</tr>
</table>

Styling and
Coloring Header
Rows
 To style the first row (headers) of a
table, we can use CSS or inline styles
to apply background colors or other
styles to the header cells (<th>). This
allows you to visually distinguish the
header row from the rest of the table.
 Example:
<tr style="background-color:
lightblue;">
<th>Day</th>
<th>Period 1</th>
<th>Period 2</th>
</tr>

Method of creating table using HTML.pptx

More Related Content

Similar to Method of creating table using HTML.pptx

More from mkrv0617

Recently uploaded

Method of creating table using HTML.pptx