Learning HTML - Day 3

 Today is 25th January 2021 and it is my first day to learn HTML 🙋

Day 3 - Time 12:30 pm - 2.30 pm

Day 1      Day 2

Now that I am bit familiar so will start by defining Agenda and will try to cover them

Agenda - Table, Basics of Layout

Table - All tags 

  • HTML <table> element to define a table
  •  HTML <tr> element to define a table row
  •  HTML <td> element to define a table data
  •  HTML <th> element to define a table heading
  •  HTML <caption> element to define a table caption
  •  CSS border property to define a border
  •  CSS border-collapse property to collapse cell borders
  •  CSS padding property to add padding to cells
  •  CSS text-align property to align cell text
  •  CSS border-spacing property to set the spacing between cells
  •  colspan attribute to make a cell span many columns
  •  rowspan attribute to make a cell span many rows
  •  id attribute to uniquely define one table
Coding for basic table with two rows with their header names

<html>
<head>
<title>My web page</title>
</head>
<body>

<h4><font color="blue">Basic HTML Table</font></h4><hr>
<table>
<!--Row is defined by <tr>-->
<!--Let me create two rows-->

<tr> <!--A row with two headers Fruits Vegetables-->
<th>Fruits</th> <!--Header of row defined by <th> tag-->
<th>Vegetables</th> 
</tr>


</table>
</body>
</html>




Adding some data in the table using <td>

<html>
<head>
<title>My web page</title>
</head>
<body>

<h4><font color="blue">Basic HTML Table</font></h4><hr>
<table>
<!--Row is defined by <tr>-->
<!--Let me create two rows-->

<tr> <!--A row with two headers Fruits Vegetables-->
<th>Fruits</th> <!--Header of row defined by <th> tag-->
<th>Vegetables</th> 
</tr>

<tr> 
<td>Apple</td>
<td>Potato</td>
</tr>

<tr>
<td>Mango</td>
<td>Carrot</td>
</tr>

<tr>
<td>Banana</td>
<td>Cauliflower</td>
</tr>


</table>
</body>
</html>


The table would be nice if there were borders, now let me add the border, within the table tag as <table border ="2px"> 2 pixels is the size of the border can increase it as well.

<html>
<head>
<title>My web page</title>
</head>
<body>

<h4><font color="blue">Basic HTML Table</font></h4><hr>
<table border="2px">
<!--Row is defined by <tr>-->
<!--Let me create two rows-->

<tr> <!--A row with two headers Fruits Vegetables-->
<th>Fruits</th> <!--Header of row defined by <th> tag-->
<th>Vegetables</th> 
</tr>

<tr> 
<td>Apple</td>
<td>Potato</td>
</tr>

<tr>
<td>Mango</td>
<td>Carrot</td>
</tr>

<tr>
<td>Banana</td>
<td>Cauliflower</td>
</tr>


</table>
</body>
</html>

Providing the name of the table by using caption tag within the table tag

<html>
<head>
<title>My web page</title>
</head>
<body>

<h4><font color="blue">Basic HTML Table</font></h4><hr>
<table border="2px">
<caption>MY FIRST TABLE</caption>
<!--Row is defined by <tr>-->
<!--Let me create two rows-->

<tr> <!--A row with two headers Fruits Vegetables-->
<th>Fruits</th> <!--Header of row defined by <th> tag-->
<th>Vegetables</th> 
</tr>

<tr> 
<td>Apple</td>
<td>Potato</td>
</tr>

<tr>
<td>Mango</td>
<td>Carrot</td>
</tr>

<tr>
<td>Banana</td>
<td>Cauliflower</td>
</tr>


</table>
</body>
</html>


Row span, col span -
Span meaning - The full extent of something from end to end; the amount of space that something covers.
Row span - The rowspan attribute specifies the number of rows a cell should span.
Syntax - <td rowspan="number">
Number - Specifies the number of rows a cell should span
Col span - The colspan attribute defines the number of columns a cell should span.
Number - Specifies the number of columns a cell should span.


Row - Horizontal 
Column - Vertical 

Example - 

Say I want to replicate the below figure, trying the code -

<html>
<head>
<title>My web page</title>
</head>
<body>
<table border="2px">
<caption>Using Row Span</caption>
<tr> <!--Header row-->
<th>Months</th>
<th>Expenditure</th>
<th>Total Expenditure</th>
</tr>
<tr><!--Row1-->
<td>January</td>
<td>Rs.10</td>
<td rowspan="4">Rs.100
</tr><!--Row2-->
<td>February</td>
<td>Rs.20</td>
<tr>
<td>March</td><!--Row3-->
<td>Rs.30</td>
</tr>
<tr> <td>April</td><!--Row4-->
<td>Rs.40</td></tr>
</table>

Output - 

Learnings - Create a table in excel first and then code, insert the tags first so that do not miss the closing tag and know how many rows I need to create, once I have the tags ready then add the data within the tags, go to approach

Ending Day 3, the topics left are colspan, id attributes, border properties, also basics of layout is untouched will carry forward these topics in Day 4.

Comments

Post a Comment

Popular posts from this blog

Learning HTML - Day 6

Image
    Today is 29th January 2021 and it is my fourth day to learn HTML 🙋 Day 6 - Time 8.00 pm - 9.15 pm Day 1          Day 2 <form> Defines an HTML form for user input <input> Defines an input control <textarea> Defines a multiline input control (text area) <label> Defines a label for an <input> element <fieldset> Groups related elements in a form <legend> Defines a caption for a <fieldset> element <select> Defines a drop-down list <optgroup> Defines a group of related options in a drop-down list <option> Defines an option in a drop-down list <button> Defines a clickable button <datalist> Specifies a list of pre-defined options for input controls <output> Defines the result of a calculation An HTML form is used to collect user input. The user input is most often sent to a server for processing. It is  a section of a document containing normal...
Read more

Jquery

This container has a top padding of 16 px This container has a border This container has background color dark and text as white This container has background color blue and text white Learing about responsive containers like sm, md, lg, xl and check them This is in small screen size This is in medium size This is in large size This is in extra large size
Read more