FSR170823 :- Basic Html Table

:point_down: :point_down: :point_down:

Create following table with html.


Table2

2 Likes

image

1 Like
<table>
      <thead>
        <th>Column1</th>
        <th>Column2</th>
        <th>Column3</th>
      </thead>
      <tbody>
        <th rowspan="2">Row1Cell1</th>
        <td>Row1cell2</td>
        <td>Row1cell3</td>
        <tr>
          <td>Row1cell2</td>
          <td>Row1cell3</td>
        </tr>
        <th colspan="3">Row3cell1</th>
      </tbody>
    </table>
1 Like
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table,
        th,
        td {
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <table>
        
        <tr>
            <td>Column 1</td>
            <td>Column 2</td>
            <td>Column 3</td>
        </tr>
        <tr>
            <td rowspan="2">Row 1 Cell 1</td>
            <td>Row 1 Cell 2</td>
            <td>Row 1 Cell 3</td>
        </tr>
        <tr>
            <td>Row 2 Cell 2</td>
            <td>Row 2 Cell 3</td>
        </tr>
        <tr>
            <td colspan="3">Row 3 Cell 1</td>
        </tr>
    </table>
    <br><br>
    <table>
        <caption> <i>A tezt with merged cells</i> </caption>
        <thead>
            <tr>
                <th rowspan="2"></th>
                <th colspan="2" >Average</th>
                <th rowspan="2" >Red eyes</th>
            </tr>
            <tr>
                <th>Height</th>
                <th>weight</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>Males</th>
                <td>1.9</td>
                <td>0.003</td>
                <td>40%</td>
            </tr>
            <tr>
                <th>Females</th>
                <td>1.7</td>
                <td>0.002</td>
                <td>43%</td>
            </tr>
        </tbody>
    </table>
</body>

</html>

op

1 Like
table table, th, td{ border: 1px solid darkred; }
columu 1 Row 1 Cell 1 Row 3 Cell 1
Columu 2 row 1 cell 2 Row 2 cell 2
Columu 3 Row 1 Cell 3 Row 2 Cell 3
<table>
            <tr><th>Column 1</th>
            <td>Column 2</td>
            <td>Column 3</td>
        </tr>
        <tr>
            <th rowspan="2">Row1 cell 1</th>
            <td >Row1 cell 2</td>
            <td >Row1 cell 3</td>
        </tr>
            <tr>
            <td >Row2 cell 2</td>
            <td >Row2 cell 3</td>
        
        </tr>
        <tr>
            <th colspan="3">row 3 cell 1</th>
        </tr>
            
        </table>
1 Like

image

1 Like
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Table</title>
    <style>
        table,td{
            border: 1px solid blue;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <td>Column1</td>
            <td>Column2</td>
            <td>Column3</td>
        </tr>
        <tr>
            <td rowspan="2">Row1 cell1</td>
            <td>Row1 cell2</td>
            <td>Row1 cell3</td>
        </tr>
        <tr>
            <td>Row2 Cell2</td>
            <td>Row2 Cell3</td>
        </tr>
        <tr>
            <td colspan="3">Row3 Cell1</td>
        </tr>
    </table>
</body>
</html>
1 Like
        </tbody>
    </table>
column 1 column 2 column 3
row1 cell 1 row1 cell 2 row 1 cell 3
row1 cell 2 row 1 cell 3
row3 cell 1
1 Like
type o<table>
    <tr>
        <th>columu 1 </th>
        <th> columu 2</th>
        <th> columu 2</th>
        </tr>

        <tr>
            <th rowspan="2">Row 1 cell 1</th>
            <td>Row 1 cell </td>
            <td>Row 1 cell 3</td>
        </tr>
        <tr>
            <td>Row 2 cell </td>
            <td>Row 2 cell 3</td>
        </tr>
        <th colspan="3">Row 3 cell 1</th>
</table>r paste code here
1 Like
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        table,thead,th,td{
            border: 2px solid green;
        }
    </style>
</head>
<body>
    <table>
        <thead>
            <th>column1</th>
            <th>column2</th>
            <th>column3</th>
        </thead>
        <tr>
            <td rowspan="2">row1 cell1</td>
            <td>row1 cell2</td>
            <td>row1 cell3</td>
        </tr>
        <tr>
            <td>row2 cell2</td>
            <td>row2 cell3</td>
        </tr>
        <tr>
            <td colspan="3">row3 cell1</td>
        </tr>
    </table>
</body>
</html>
1 Like
A tezt with merged cells
Average Red eyes
Height weight
Males 1.9 0.003 40%
Females 1.7 0.002 43%
1 Like

1 Like
<table>
        <table>
            <tr>
                <th>Coloumn 1</th>
                <th>Coloumn 2</th>
                <th>Coloumn 3</th>
            </tr>
            <tr>
                <th rowspan="2">Row1 cell 1</th>
                <th>Row1 cell 1</th>
                <th>Row1 cell 2</th>
            </tr>
            <tr>
                <th>Row1 cell 1</th>
                <th>Row1 cell 2</th>
            </tr>
            </tr>
            <th colspan="3">Row 3 cell 1</th>
    </table>

image

1 Like

image

<table>

        <th rowspan="2"></th>
        <td colspan="2">Average</td>
        <th rowspan="2"></th>
        <tr>
          <td>Width</td>
          <td>Height</td>
           
        </tr>
       
    <tr>
      <th>Males</th>
      <td>0.1</td>
      <td>19%</td>
      <td>100</td>
    </tr>
    <tr>
      <th>Females</th>
      <td>0.2</td>
      <td>24%</td>
      <td>200</td>
    </tr>
     </table>
1 Like
Column1 Column2 Column3
Row1Cell1 Row1cell2 Row1cell3
Row1cell2 Row1cell3
Row3cell1
``` ```
column 1 columu 2 columu 3
Row 1 cell 1 cell 1 cell 2 Row 1 cell 3
row 2 cell 2 row 2 cell 3
row 3 cell 1
``` ```
 <table>
        
        <tr>
            <td>Column 1</td>
            <td>Column 2</td>
            <td>Column 3</td>
        </tr>
        <tr>
            <td rowspan="2">Row 1 Cell 1</td>
            <td>Row 1 Cell 2</td>
            <td>Row 1 Cell 3</td>
        </tr>
        <tr>
            <td>Row 2 Cell 2</td>
            <td>Row 2 Cell 3</td>
        </tr>
        <tr>
            <td colspan="3">Row 3 Cell 1</td>
        </tr>
    </table>
    <br><br>
    <table>
        <caption> <i>A tezt with merged cells</i> </caption>
        <thead>
            <tr>
                <th rowspan="2"></th>
                <th colspan="2" >Average</th>
                <th rowspan="2" >Red eyes</th>
            </tr>
            <tr>
                <th>Height</th>
                <th>weight</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>Males</th>
                <td>1.9</td>
                <td>0.003</td>
                <td>40%</td>
            </tr>
            <tr>
                <th>Females</th>
                <td>1.7</td>
                <td>0.002</td>
                <td>43%</td>
            </tr>
        </tbody>
    </table>
![screenshot|690x247](upload://hbu3nT5k3MdZ1zjITj9HF26Rsou.png)

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

A test table with merged calls

Average Red Eyes
height weight
Males 1.9 0.003 40%
Females 1.7 0.002 43%