Chapterrrrrrrrrrr_10_Building Tables.pdf
ankitayadavay123
5 views
35 slides
Mar 09, 2025
Slide 1 of 35
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
About This Presentation
Good education material
Slide Content
Building Tables
Institute of Technical Education and Research (ITER),
Siksha 'O' Anusandhan University (SOA University)
Modern Web Development Workshop - 1
Institute of Technical Education and Research (ITER),
Siksha 'O' Anusandhan University (SOA University)
Modern Web Development Workshop - 1
➢HTML tables offer a powerful tool for presenting data on your
website.
➢An HTML Table is an arrangement of data in rows and columns in
tabular format.
➢In HTML, tables are created from left to right and top to bottom.
➢You start by creating the upper-left cell and finish with the
bottom-right cell.
➢We can create a table to display data in tabular form, using <table>
element, with the help of <tr> , <td>, and <th> elements.
➢In Each table, table row is defined by <tr> tag, table header is
defined by <th>, and table data is defined by <td> tags.
HTML Table
website.
➢An HTML Table is an arrangement of data in rows and columns in
tabular format.
➢In HTML, tables are created from left to right and top to bottom.
➢You start by creating the upper-left cell and finish with the
bottom-right cell.
➢We can create a table to display data in tabular form, using <table>
element, with the help of <tr> , <td>, and <th> elements.
➢In Each table, table row is defined by <tr> tag, table header is
defined by <th>, and table data is defined by <td> tags.
HTML Table
➢Table Parts:
○The caption indicates what the table is about for example,
“Voting Statistics” . Captions is optional.
○The table headings label the rows, columns, or both. Usually
they’re in an emphasized font that’s different from the rest of
the table. They’re optional.
○Table cells are the individual squares in the table. A cell can
contain normal table data or a table heading.
○Table data is the values in the table itself. The combination
of the table headings and table data makes up the sum of the
table.
HTMLTable
○The caption indicates what the table is about for example,
“Voting Statistics” . Captions is optional.
○The table headings label the rows, columns, or both. Usually
they’re in an emphasized font that’s different from the rest of
the table. They’re optional.
○Table cells are the individual squares in the table. A cell can
contain normal table data or a table heading.
○Table data is the values in the table itself. The combination
of the table headings and table data makes up the sum of the
table.
HTMLTable
➢All the components of a table are placed within a <table>...</table>
element.
The <table> Element
Heading cells
Three rows
Data cells
element.
The <table> Element
Heading cells
Three rows
Data cells
➢
The <table> Element
➔You’ll put the headings along the left
edge of the table instead top edge.
➔To accomplish this, put each <th> in
the first cell in each row <tr> and
follow it with the data <td> that
pertains to each heading.
The <table> Element
➔You’ll put the headings along the left
edge of the table instead top edge.
➔To accomplish this, put each <th> in
the first cell in each row <tr> and
follow it with the data <td> that
pertains to each heading.
➢Both table heading cells and data cells can contain any
text, HTML code, or both, including links, lists, forms,
images, and other tables.
➢Define a cell with a <th> or <td> element with nothing
inside it.
Empty Cells
text, HTML code, or both, including links, lists, forms,
images, and other tables.
➢Define a cell with a <th> or <td> element with nothing
inside it.
Empty Cells
➢The <caption> tag defines a table caption.
➢Table captions tell your visitor what the table is for.
➢The <caption> tag must be inserted immediately after the
<table> tag.
➢By default, a table caption will be center-aligned above a table.
➢If you don’t want a caption, it’s optional.
➢You can include details inside a caption to provide additional
information about the table using <detail> and <summary>
tags that is hidden by default.
Captions
➢Table captions tell your visitor what the table is for.
➢The <caption> tag must be inserted immediately after the
<table> tag.
➢By default, a table caption will be center-aligned above a table.
➢If you don’t want a caption, it’s optional.
➢You can include details inside a caption to provide additional
information about the table using <detail> and <summary>
tags that is hidden by default.
Captions
➢You have to create a table that indicates the colors you
get when you mix the three primary colors together.
➢Caption should be ‘Mixing the Primary Colors’ and
border = 1.
Creating a Simple Table
get when you mix the three primary colors together.
➢Caption should be ‘Mixing the Primary Colors’ and
border = 1.
Creating a Simple Table
Creating a Simple Table
➢HTML tables can have different sizes for each column, row or the
entire table.
➢Use the style attribute with the width or height properties to
specify the size of a table, row or column.
➢To set the width of a table, add the style attribute to the <table>
element:
<table style="width:100%">
Sizing Tables
entire table.
➢Use the style attribute with the width or height properties to
specify the size of a table, row or column.
➢To set the width of a table, add the style attribute to the <table>
element:
<table style="width:100%">
Sizing Tables
Make Different Sizing Tables
10% 10%80%
20% 40%40%
60% 20%20%
10% 10%80%
20% 40%40%
60% 20%20%
Make Different Sizing Tables (Hint)
10% 10%80%
20% 40%40%
60% 20%20%
10% 10%80%
20% 40%40%
60% 20%20%
➢The border attribute, which appears immediately inside the opening
<table> tag, is the most common attribute of the <table> element. But
this attribute is nonconforming in HTML5. Your HTML isn’t 100%
correct.
➢You can also adjust the borders around your tables using CSS, with
much finer control than the border attribute provides.
➢HTML tables can have borders of different styles and shapes.
➢To add a border, use the CSS border property on table, th, and td
elements.
table, th, td {
border: 1px solid black;
}
➢To avoid having double borders like in the example above, set the CSS
border-collapse property to collapse.
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
Table Borders
<table> tag, is the most common attribute of the <table> element. But
this attribute is nonconforming in HTML5. Your HTML isn’t 100%
correct.
➢You can also adjust the borders around your tables using CSS, with
much finer control than the border attribute provides.
➢HTML tables can have borders of different styles and shapes.
➢To add a border, use the CSS border property on table, th, and td
elements.
table, th, td {
border: 1px solid black;
}
➢To avoid having double borders like in the example above, set the CSS
border-collapse property to collapse.
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
Table Borders
Table Borders Example
<!DOCTYPE html>
<html><head>
<style>
table, th, td {
border: 1px solid white;
border-collapse: collapse;
}
th, td {
background-color: #96D4D4;
}
</style>
</head>
<body>
<table style="width:100%">
<caption>Mixing the Primary
Colors</caption>
<tr>
<th></th>
<th>Red</th>
<th>Yellow</th>
<th>Blue</th>
</tr>
<tr>
<th>Red</th>
<td>Red</td>
<td>Orange</td>
<td>Purple</td>
</tr>
<tr>
<th>Yellow</th>
<td>Orange</td>
<td>Yellow</td>
<td>Green</td>
</tr>
<tr>
<th>Blue</th>
<td>Purple</td>
<td>Green</td>
<td>Blue</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html><head>
<style>
table, th, td {
border: 1px solid white;
border-collapse: collapse;
}
th, td {
background-color: #96D4D4;
}
</style>
</head>
<body>
<table style="width:100%">
<caption>Mixing the Primary
Colors</caption>
<tr>
<th></th>
<th>Red</th>
<th>Yellow</th>
<th>Blue</th>
</tr>
<tr>
<th>Red</th>
<td>Red</td>
<td>Orange</td>
<td>Purple</td>
</tr>
<tr>
<th>Yellow</th>
<td>Orange</td>
<td>Yellow</td>
<td>Green</td>
</tr>
<tr>
<th>Blue</th>
<td>Purple</td>
<td>Green</td>
<td>Blue</td>
</tr>
</table>
</body>
</html>
Table Borders Example
➢The cell padding attribute defines the amount of space between
the edges of the cells and the content inside a cell.
➢By default, many browsers draw tables with a cell padding of
two pixels.
➢You can add more space by adding the nonconforming
cellpadding attribute to the <table> element, with a value in
pixels for the amount of cell padding you want.
<table style="width:100%" cellpadding="10" border=1>
Cell Padding
the edges of the cells and the content inside a cell.
➢By default, many browsers draw tables with a cell padding of
two pixels.
➢You can add more space by adding the nonconforming
cellpadding attribute to the <table> element, with a value in
pixels for the amount of cell padding you want.
<table style="width:100%" cellpadding="10" border=1>
Cell Padding
➢ A cellpadding attribute with a value of 0 causes the edges of the cells to
touch the edges of the cell’s contents.
<table style="width:100%" cellpadding="0" border=1>
➢You can also specify the padding of a table cell using the padding
property in CSS.
Cell Padding
th, td {
padding-top: 10px;
padding-bottom: 20px;
padding-left: 30px;
padding-right: 40px;
}
th,td{
padding: 10px;
}
touch the edges of the cell’s contents.
<table style="width:100%" cellpadding="0" border=1>
➢You can also specify the padding of a table cell using the padding
property in CSS.
Cell Padding
th, td {
padding-top: 10px;
padding-bottom: 20px;
padding-left: 30px;
padding-right: 40px;
}
th,td{
padding: 10px;
}
➢Cell spacing is similar to cell padding except that it affects the amount of
space between cells—that is, the width of the space between the inner and
outer lines that make up the table border.
➢By default the space is set to 2 pixels.
<table style="width:100%" cellspacing="10" border=1>
➢The CSS equivalent of the cellspacing attribute is the border-spacing
property.
➢To use it, the border-collapse property must not be set to collapse, as it
eliminates cell spacing.
Cell Spacing
space between cells—that is, the width of the space between the inner and
outer lines that make up the table border.
➢By default the space is set to 2 pixels.
<table style="width:100%" cellspacing="10" border=1>
➢The CSS equivalent of the cellspacing attribute is the border-spacing
property.
➢To use it, the border-collapse property must not be set to collapse, as it
eliminates cell spacing.
Cell Spacing
Cell Spacing
<table style="width:100%" border=1>
<table style="width:100%" border=1>
➢Another enhancement that you can make to your tables is to
adjust the alignment of their content.
➢The text-align CSS property aligns content horizontally, whereas
the vertical-align property aligns content vertically.
➢By default, tables are displayed on a line by themselves along the
left side of the page, with any text above or below the table.
➢Table Alignment:
○By default, tables are displayed on a line by themselves along
the left side of the page, with any text above or below the
table.
○ However, you can use the float style property to float tables
along the left or right margins and wrap text alongside them
the same way you can with images.
Aligning Your Table Content
adjust the alignment of their content.
➢The text-align CSS property aligns content horizontally, whereas
the vertical-align property aligns content vertically.
➢By default, tables are displayed on a line by themselves along the
left side of the page, with any text above or below the table.
➢Table Alignment:
○By default, tables are displayed on a line by themselves along
the left side of the page, with any text above or below the
table.
○ However, you can use the float style property to float tables
along the left or right margins and wrap text alongside them
the same way you can with images.
Aligning Your Table Content
Table Alignment:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table border="1" style="width:
70%; float: left;">
<caption>Mixing the Primary
Colors</caption>
<tr>
<th></th>
<th>Red</th>
<th>Yellow</th>
<th>Blue</th>
</tr>
<tr>
<th>Red</th>
<td>Red</td>
<td>Orange</td>
<td>Purple</td>
</tr>
<tr>
<th>Yellow</th>
<td>Orange</td>
<td>Yellow</td>
<td>Green</td>
</tr>
<tr>
<th>Blue</th>
<td>Purple</td>
<td>Green</td>
<td>Blue</td>
</tr>
</table>
<p>By default, tables are displayed on a line by
themselves along the left side of the page, with any text
above or below the table. However, you can use the
float style property to float tables along the left or right
margins and wrap text alongside them the same way
you can with images</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table border="1" style="width:
70%; float: left;">
<caption>Mixing the Primary
Colors</caption>
<tr>
<th></th>
<th>Red</th>
<th>Yellow</th>
<th>Blue</th>
</tr>
<tr>
<th>Red</th>
<td>Red</td>
<td>Orange</td>
<td>Purple</td>
</tr>
<tr>
<th>Yellow</th>
<td>Orange</td>
<td>Yellow</td>
<td>Green</td>
</tr>
<tr>
<th>Blue</th>
<td>Purple</td>
<td>Green</td>
<td>Blue</td>
</tr>
</table>
<p>By default, tables are displayed on a line by
themselves along the left side of the page, with any text
above or below the table. However, you can use the
float style property to float tables along the left or right
margins and wrap text alongside them the same way
you can with images</p>
</body>
</html>
Table Alignment:
➢ Horizontal alignment (the text-align property) defines whether
the data within a cell is aligned with the left cell margin (left), the
right cell margin (right), or centered within the two (center).
➢Vertical alignment (the vertical-align property) defines the
vertical alignment of the data within the cell: flush with the top of
the cell (top), flush with the bottom of the cell (bottom), or
vertically centered within the cell (middle).
➢You can also use vertical-align: baseline;, which is similar to
vertical-align: top; except that it aligns the baseline of the first
line of text in each cell.
Cell Alignment
the data within a cell is aligned with the left cell margin (left), the
right cell margin (right), or centered within the two (center).
➢Vertical alignment (the vertical-align property) defines the
vertical alignment of the data within the cell: flush with the top of
the cell (top), flush with the bottom of the cell (bottom), or
vertically centered within the cell (middle).
➢You can also use vertical-align: baseline;, which is similar to
vertical-align: top; except that it aligns the baseline of the first
line of text in each cell.
Cell Alignment
Cell Alignment
<!DOCTYPE html>
<html><head>
<title>Cell Alignments</title>
<style>
td { height: 100px; }
</style>
</head>
<body>
<table border="1" style="padding: 8px; width:100%;">
<tr>
<th><br /></th>
<th>Left</th>
<th>Centered</th>
<th>Right</th>
</tr>
<tr>
<th>Top</th>
<td style="text-align: left; vertical-align: top;">
<img src="star.png" alt="" /></td>
<td style="text-align: center; vertical-align: top;"><img
src="star.png"
alt="" /></td>
<td style="text-align: right; vertical-align: top;">
<img src="star.png" alt=""/></td>
</tr>
<tr>
<th>Centered</th>
<td style="text-align: left; vertical-align: middle;">
<img src="star.png" alt="" /></td>
<td style="text-align: center; vertical-align: middle;">
<img src="star.png" alt="" /></td>
<td style="text-align: right; vertical-align:middle;">
<img src="star.png" alt=""/></td>
</tr>
<tr>
<th>Bottom</th>
<td style="text-align: left; vertical-align: bottom;">
<img src="star.png" alt="" /></td>
<td style="text-align: center; vertical-align: bottom;">
<img src="star.png" alt="" /></td>
<td style="text-align: right; vertical-align: bottom;">
<img src="star.png" alt="" /></td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html><head>
<title>Cell Alignments</title>
<style>
td { height: 100px; }
</style>
</head>
<body>
<table border="1" style="padding: 8px; width:100%;">
<tr>
<th><br /></th>
<th>Left</th>
<th>Centered</th>
<th>Right</th>
</tr>
<tr>
<th>Top</th>
<td style="text-align: left; vertical-align: top;">
<img src="star.png" alt="" /></td>
<td style="text-align: center; vertical-align: top;"><img
src="star.png"
alt="" /></td>
<td style="text-align: right; vertical-align: top;">
<img src="star.png" alt=""/></td>
</tr>
<tr>
<th>Centered</th>
<td style="text-align: left; vertical-align: middle;">
<img src="star.png" alt="" /></td>
<td style="text-align: center; vertical-align: middle;">
<img src="star.png" alt="" /></td>
<td style="text-align: right; vertical-align:middle;">
<img src="star.png" alt=""/></td>
</tr>
<tr>
<th>Bottom</th>
<td style="text-align: left; vertical-align: bottom;">
<img src="star.png" alt="" /></td>
<td style="text-align: center; vertical-align: bottom;">
<img src="star.png" alt="" /></td>
<td style="text-align: right; vertical-align: bottom;">
<img src="star.png" alt="" /></td>
</tr>
</table>
</body>
</html>
Cell Alignment
➢ HTML tables can have cells that span over multiple rows and/or columns.
➢To create a cell that spans multiple rows or columns, you add the rowspan or
colspan attribute to the <th> or <td> elements, along with the number of rows
or columns you want the cell to span.
➢The data within that cell then fills the entire width or length of the combined
cells.
Spanning Multiple Rows or Columns
Column span
➔Cells always span downward and
to the right. To create a cell that
spans several columns, you add
the colspan attribute to the
leftmost cell in the span.
➢To create a cell that spans multiple rows or columns, you add the rowspan or
colspan attribute to the <th> or <td> elements, along with the number of rows
or columns you want the cell to span.
➢The data within that cell then fills the entire width or length of the combined
cells.
Spanning Multiple Rows or Columns
Column span
➔Cells always span downward and
to the right. To create a cell that
spans several columns, you add
the colspan attribute to the
leftmost cell in the span.
Spanning Multiple Rows or Columns
Row span
➔Note that if a cell spans multiple
rows, you don’t have to redefine
it as empty in the next row or
rows. Just ignore it and move to
the next cell in the row.
Row span
➔Note that if a cell spans multiple
rows, you don’t have to redefine
it as empty in the next row or
rows. Just ignore it and move to
the next cell in the row.
➢Draw the following table using rowspan and colspan.
Examples
<!DOCTYPE html>
<html>
<head>
<title>Row and Column Spans</title>
<style>
table, td, th {
border: 1px solid black;
text-align:center;
}
td{
min-width:100px;
height:15px;
}
table{
border-collapse: collapse;
}
</style>
</head>
<body>
<table>
<tr>
<td colspan=3>2022</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan=2 rowspan=2>FIESTA</td>
<td></td>
</tr>
<tr><td></td></tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
Examples
<!DOCTYPE html>
<html>
<head>
<title>Row and Column Spans</title>
<style>
table, td, th {
border: 1px solid black;
text-align:center;
}
td{
min-width:100px;
height:15px;
}
table{
border-collapse: collapse;
}
</style>
</head>
<body>
<table>
<tr>
<td colspan=3>2022</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan=2 rowspan=2>FIESTA</td>
<td></td>
</tr>
<tr><td></td></tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
➢The <colgroup> element is used to style specific columns of a table.
➢To do so, you need to define the columns in your table with the <colgroup>
and <col> elements.
➢The <colgroup>...</colgroup> element is used to enclose one or more
columns in a group.
➢Span defines the number of columns in the column group. Its value must be
an integer greater than 0. If span isn’t defined, the <colgroup> element
defaults to a column group that contains one column.
HTML Table Colgroup
➢To do so, you need to define the columns in your table with the <colgroup>
and <col> elements.
➢The <colgroup>...</colgroup> element is used to enclose one or more
columns in a group.
➢Span defines the number of columns in the column group. Its value must be
an integer greater than 0. If span isn’t defined, the <colgroup> element
defaults to a column group that contains one column.
HTML Table Colgroup
HTML Table Colgroup
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<h2>Colgroup</h2>
<p>Add the a colgroup with a col element that spans over two
columns to define a style for the two columns:</p>
<table style="width: 100%;">
<colgroup>
<col span="2" style="background-color: #D6EEEE">
</colgroup>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
<th>FRI</th>
<th>SAT</th>
<th>SUN</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
</tr>
<tr>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
</tr>
<tr>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<h2>Colgroup</h2>
<p>Add the a colgroup with a col element that spans over two
columns to define a style for the two columns:</p>
<table style="width: 100%;">
<colgroup>
<col span="2" style="background-color: #D6EEEE">
</colgroup>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
<th>FRI</th>
<th>SAT</th>
<th>SUN</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
</tr>
<tr>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
</tr>
<tr>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
</tr>
</table>
</body>
</html>
➢ The <tbody> tag is used to group the body content in an HTML table.
➢The <tbody> element is used in conjunction with the <thead> and <tfoot>
elements to specify each part of a table (body, header, footer).
➢Browsers can use these elements to enable scrolling of the table body
independently of the header and footer. Also, when printing a large table
that spans multiple pages, these elements can enable the table header and
footer to be printed at the top and bottom of each page.
➢The <tbody> element must have one or more <tr> tags inside.
➢The <tbody> tag must be used in the following context: As a child of a
<table> element, after any <caption>, <colgroup>, and <thead> elements.
➢The <thead>, <tbody>, and <tfoot> elements will not affect the layout of
the table by default. However, you can use CSS to style these elements.
<thead>, <tbody>, and a <tfoot> element
➢The <tbody> element is used in conjunction with the <thead> and <tfoot>
elements to specify each part of a table (body, header, footer).
➢Browsers can use these elements to enable scrolling of the table body
independently of the header and footer. Also, when printing a large table
that spans multiple pages, these elements can enable the table header and
footer to be printed at the top and bottom of each page.
➢The <tbody> element must have one or more <tr> tags inside.
➢The <tbody> tag must be used in the following context: As a child of a
<table> element, after any <caption>, <colgroup>, and <thead> elements.
➢The <thead>, <tbody>, and <tfoot> elements will not affect the layout of
the table by default. However, you can use CSS to style these elements.
<thead>, <tbody>, and a <tfoot> element
<thead>, <tbody>, and a <tfoot> element
<!DOCTYPE html>
<html>
<head>
<style>
thead {color:green;}
tbody {color:blue;}
tfoot {color:red;}
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<h1>The thead, tbody, and tfoot
elements - Styled with CSS</h1>
<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
thead {color:green;}
tbody {color:blue;}
tfoot {color:red;}
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<h1>The thead, tbody, and tfoot
elements - Styled with CSS</h1>
<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
</table>
</body>
</html>
1.Create a simple nested table (a table within a table) that contains three rows and four columns.
Inside the cell that appears at the second column in the second row, create a second table that
contains two rows and two columns.
2.Create a table in html that displays the following student information:
○Name
○Student ID
○Subject
○Grade
A.The table should include at least 5 rows of student data and a header row and set a border
for the table using CSS.
B.Use the <thead>, <tbody>, and <tfoot> tags.
C.Use alternating background colors for even and odd rows (using CSS :nth-child()
Pseudo-class).
3.Write the html and css code to display following table.
Quiz and Assignments
Inside the cell that appears at the second column in the second row, create a second table that
contains two rows and two columns.
2.Create a table in html that displays the following student information:
○Name
○Student ID
○Subject
○Grade
A.The table should include at least 5 rows of student data and a header row and set a border
for the table using CSS.
B.Use the <thead>, <tbody>, and <tfoot> tags.
C.Use alternating background colors for even and odd rows (using CSS :nth-child()
Pseudo-class).
3.Write the html and css code to display following table.
Quiz and Assignments
4.Write the html and css code to display following tables (Use the <thead>, <tbody>,
<tfoot> tags and CSS :nth-child() Pseudo-class).
5.Create a table that displays student information, including:
○Student photo (use an <img> tag inside a table cell).
○Name.
○Lab.
○Department.
Quiz and Assignments
<tfoot> tags and CSS :nth-child() Pseudo-class).
5.Create a table that displays student information, including:
○Student photo (use an <img> tag inside a table cell).
○Name.
○Lab.
○Department.
Quiz and Assignments
Thank You
Tags
Categories
GeneralDownload
Download Slideshow Get the original presentation fileQuick Actions
Statistics
- Views 5
- Slides 35
- Age 288 days
Related Slideshows
22
Pray For The Peace Of Jerusalem and You Will Prosper
RodolfoMoralesMarcuc
45 views
26
Don_t_Waste_Your_Life_God.....powerpoint
chalobrido8
47 views
31
VILLASUR_FACTORS_TO_CONSIDER_IN_PLATING_SALAD_10-13.pdf
JaiJai148317
42 views
14
Fertility awareness methods for women in the society
Isaiah47
40 views
35
Chapter 5 Arithmetic Functions Computer Organisation and Architecture
RitikSharma297999
38 views
5
syakira bhasa inggris (1) (1).pptx.......
ourcommunity56
41 views