Nestled within the confines of a meticulously crafted HTML table, a symphony of words unfolds, weaving a tapestry of narratives and ideas across the digital canvas. This table, a structured sanctuary, is a vessel designed to cradle the weight of a 4000-word lexicon, each syllable a building block in the edifice of information.
As the HTML document comes to life, the `<table>` element sets the stage for this literary exposition. It is a maestro orchestrating the arrangement of rows and columns, a ballet of structure and aesthetics. The `<thead>` section, akin to an overture, introduces a lone sentinel - a `<th>` that spans the breadth of two columns. It bears the weighty mantle of announcing the purpose, the essence of the forthcoming textual cascade.
Amidst the `<tbody>`, a solitary row materializes, a canvas awaiting the brushstrokes of prose. The single `<td>` cell, expansive in its scope, cradles the 4000 words with an unwavering embrace. Here, the narrative unfolds, sentences cascading like a waterfall, paragraphs breathing life into ideas, and words becoming the bricks that construct the intellectual architecture.
The HTML structure, adorned with styles, defines the aesthetic contours of this literary tableau. The table, draped in a border of unity, merges columns and rows seamlessly. Each cell, bearing a padding of intent, aligns the text with precision, a marriage of form and function. The digital parchment is rendered legible, a testament to the symbiosis between content and presentation.
As the reader's gaze traverses this digital expanse, the narrative unfolds paragraph by paragraph. The `<p>` tags delineate the rhythm of thought, providing a visual cadence to the reader. Sentences ebb and flow, creating a literary symphony that dances across the confines of this HTML sanctuary.
In this structured milieu, the text becomes more than mere information; it transforms into an immersive experience. The HTML table, a silent curator, lends order to the expanse of words, turning them into a journey, a narrative labyrinth where ideas interlace and perspectives converge.
And so, within the confines of this HTML table, the 4000 words breathe life into the digital realm. It is not merely a collection of characters but an odyssey of expression, a testament to the harmonious marriage of technology and literature, where words find their sanctuary, organized, structured, and inviting exploration.
2. Computer Science
Objectives of the Session
Upon completing this section, you should be able to:
1. Insert a table.
2. Add a table header.
3. Explain a table’s attributes.
4. Edit a table.
5. Merge rows and columns
4. Computer Science
Table in HTML
The <TABLE></TABLE> element has four
sub-elements:
Table Row<TR></TR>.
Table Header <TH></TH>.
Table Data <TD></TD>.
Caption <CAPTION></CAPTION>.
The table row elements usually contain
table header elements or table data
elements.
5. Computer Science
▪ A table caption allows you to specify a line of
text that will appear centered above or bellow
the table.
<TABLE BORDER=1 CELLPADDING=2>
<CAPTION ALIGN=“BOTTOM”> Label For My Table
</CAPTION>
▪ The Caption element has one attribute ALIGN
that can be either TOP (Above the table) or
BOTTOM (below the table).
TABLE Caption
6. Computer Science
▪ Table Header (TH) which represent first
row of the table. Contents of the table
header cells appearing centered and in
bold text.
▪ Table cell data is represented by the TD
(Table Data) element.
Table Header
7. Computer Science
HTML Code for Table
<table border="1">
<caption>Student Table</caption>
<thead>
<tr>
<th>Roll No</th>
<th>Name</th>
<th>Class</th>
</tr>
</thead>
<tbody>
<tr>
<td>20</td>
<td>Waheed Anwar</td>
<td>BSCS</td>
</tr>
<tr>
<td>21</td>
<td>Ahmad Hassan</td>
<td>BSCS</td>
</tr>
</tbody>
</table>
Roll No Name Class
20 Waheed Anwar BSCS
21 Ahmad Hassan BSCS
Student Table
8. Computer Science
▪ BGColor: Browsers support background colors
in a table.
▪ Width: you can specify the table width as an
absolute number of pixels or a percentage of the
document width. You can set the width for the
table cells as well.
▪ Border: You can choose a numerical value for
the border width, which specifies the border in
pixels.
▪ CellSpacing: Cell Spacing represents the space
between cells and is specified in pixels.
Tables Attributes
10. Computer Science
▪ CellPadding: Cell Padding is the space
between the cell border and the cell
contents and is specified in pixels.
▪ Align: tables can have left, right, or center
alignment.
▪ Background: Background Image, will be
titled in IE3.0 and above.
▪ BorderColor, BorderColorDark.
Tables Attributes
11. Computer Science
▪ Colspan: Specifies how many cell columns of the table
this cell should span.
▪ Rowspan: Specifies how many cell rows of the table this
cell should span.
▪ Align: cell data can have left, right, or center alignment.
▪ Valign: cell data can have top, middle, or bottom
alignment.
▪ Width: you can specify the width as an absolute number
of pixels or a percentage of the document width.
▪ Height: You can specify the height as an absolute
number of pixels or a percentage of the document height
Table Data and Table Header Attributes
