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>
Os
cuento ahora qué es cada cosa, para que podáis personalizarlo y adaptarlo a
vuestras necesidades.
- 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 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 | 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,
