Table of content on blogger

Create a table of content with information about your blog projects and links to your blog article.

Include also a link to your classmates blog articles.

FIRST OPTION:

HTML code for a table:

 

<table align="left" bgcolor="#ffffff " border="0" bordercolor="#ffffff" cellpadding:"2" cellspacing="0" >

<tbody>

<tr>
<td><img src="URL of the image" height="120" width="120" /></td>
<td><img src=" URL of the image" height="120" width="120" /></td>
<td><img src=" URL of the image" height="120" width="120" /></td>
<td><img src=" URL of the image " height="120" width="120" /></td>
</tr>

<tr>
<td><img src=" URL of the image " height="120" width="120" /></td>
<td><img src=" URL of the image " height="120" width="120" /></td>
<td><img src=" URL of the image " height="120" width="120" /></td>
<td><img src=" URL of the image " height="120" width="120" /></td>
</tr>

</tbody></table>

 

Here I explain what each command or piece of code makes. You will have to adapt it and make the changes  according to your needs.

• Between  <tr>...</tr>: line (horizontal).
• What you find between  <td>...</td>: each of the cells that this line contains
• table align: can be  left, center, right
• bgcolor: background colour (white in the example).
• border: border thikness in pixels
• border color: (white in the example).
• cellpadding: space between border and content in pixels.
• cellspacing: distance between  the table cells, in pixels.
• height:  image height, in pixels. (If no value here the image will appear with its real size)
• width: image width

To include text change the image by:

 

<td>write the text here</td>

     This is how this version looks:

👀 👽

here I write what I wanto to publish

👽

 

SECOND OPTION: 

Here you have the html code to create a link

<a href="https://ercillaictechs.blogspot.com/" target="_blank">myblog</a>

 Here you have the code to add a simple table with some content on it:

<div class="table">
  <table style="white-space: nowrap;">
    <thead>
      <tr>
        <th>No</th>
        <th>Column_1</th>
        <th>Column_2</th>
        <th>Column_3</th>
        <th>Column_4</th>
        <th>Column_5</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Abhishek</td>
        <td>Padhi</td>
        <td>90</td>
        <td>96</td>
        <td>99</td>
      </tr>
      
      <tr>
        <td>2</td>
        <td>Udit</td>
        <td>Narayan</td>
        <td>95</td>
        <td>98</td>
        <td>99</td>
      </tr>
      
      <tr>
        <td>3</td>
        <td>Rohit</td>
        <td>Thakur</td>
        <td>90</td>
        <td>93</td>
        <td>89</td>
      </tr>
      
    </tbody>
  </table>
</div>


<style> 
.table {
    display: block;
    overflow-y: hidden;
    overflow-x: auto;
    scroll-behavior: smooth;
} 
  
 .table thead {
    display: table-header-group;
    vertical-align: middle;
    border-color: inherit;
    color: white;
    background: darkcyan;
}
  
tr {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit;
}
  
 table th {
    padding: 16px;
    text-align: inherit;
    border-bottom: 1px solid black;
   color:white!important;
}
  
  tbody {
    display: table-row-group;
    vertical-align: middle;
    border-color: inherit;
}
  
 table:not(.tr-caption-container) {
    min-width: 100%;
    border-radius: 3px;
}
</style>

And here you have the result. With this you may adapt the information inside, using the blog html tool

 

No	Column_1	Column_2	Column_3	Column_4	Column_5
1	Abhishek	myblog	90	coeff of friction poster	99
2	Udit	Narayan	95	98	99
3	Rohit	Myproject99999	90	93	89

Final Project: Publish a final article on your blog with the highlights of the year

On your article you have to include:

- At least 3 or 4 of your best projects of the year with the author, the link to get to it and the topic or comment about it

- Al least 3 or 4 of the projects by any of your class mates. Link, author and topic

- Present the list of projects on a nice table

- Minimum number of projects on the table: 7

- Do not repeat project or student

- Include labels: project, best, summing up, table,