Tuesday 4 June 2024

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.


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,

No comments:

Post a Comment