Basics (again) - Accumulated list

Ask for Help
18

Paying it forward, here’s a quick recap of the columns that are used to construct the HTML table. Hope it’ll be useful for someone down the line. Note that my text Is aligned RTL.

Table top:

<table  align="center" border="10" cellpadding="1" cellspacing="1" dir="rtl"  class="ChangeLog">
	<thead>
		<tr>
			<th scope="col">VALUE</th>
			<th scope="col">BEFORE</th>
			<th scope="col">AFTER</th>
		</tr>
	</thead>
	<tbody>

image

The heart of the table, the rows:

<tr>
			<td>VALUE</td>
			<td>BEFORE</td>
			<td>AFTER</td>
		</tr>

image

The bottom:

</tbody>
</table>
<p>&nbsp;</p>

<style>
table.ChangeLog {
  border: 1px solid #1C6EA4;
  background-color: #ECEAF1;
  width:70%; 
  margin-left:15%; 
  margin-right:15%;
  text-align: center;
  border-collapse: collapse;
}
table.ChangeLog td, table.ChangeLog th {
  border: 1px solid #AAAAAA;
  padding: 3px 2px;
}
table.ChangeLog tbody td {
  font-size: 18px;
}
table.ChangeLog tr:nth-child(even) {
  background: #F3F3F3;
}
table.ChangeLog thead {
  background: #351C75;
  border-bottom: 2px solid #444444;
}
table.ChangeLog thead th {
  font-size: 20px;
  font-weight: bold;
  color: #FFFFFF;
  text-align: center;
  border-left: 2px solid #D0E4F5;
}
table.ChangeLog thead th:first-child {
  border-left: none;
}

table.ChangeLog tfoot td {
  font-size: 14px;
text-align: center;
}
table.ChangeLog tfoot .links {
  text-align: center;
}
table.ChangeLog tfoot .links a{
  display: inline-block;
  background: #1C6EA4;
  color: #FFFFFF;
  padding: 2px 8px;
  border-radius: 5px;
}
</style>

We than consolidate all rows:
image

And last, merging the three parts:
image

Thanks and see you on the next topic!