I would like to know how to do tab spaces after a word. The output shown is what i currently have. However i want to do it so that even though the word thai is shorter than the word cantonese, I want the circles after them to start at the same point so it will look more organized. Below are my php codes to generate the language which could be 'thai', 'english' etc. and if the level of language is proficient, it will show 1 circle so on and so forth.
for($a = 0; $a < $count; $a++)
{
$b = $languagelevel[$a][0];
echo $b;
if($languagelevel[$a][1] == "Proficient")
{
for($i = 0; $i < 1; $i++)
{
echo "<div class='language1'></div>";
}
}
else if($languagelevel[$a][1] == "Good")
{
for($i = 0; $i < 2; $i++)
{
echo "<div class='language2'></div>";
}
}
else if($languagelevel[$a][1] == "Very Good")
{
for($i = 0; $i < 3; $i++)
{
echo "<div class='language3'></div>";
}
}
else
{
for($i = 0; $i < 4; $i++)
{
echo "<div class='language3'></div>";
}
}
echo "<br>";
}
Below are my css codes for the circles. .language1 { border-radius: 50%; width: 15px; height: 15px; padding: 3px; display:inline-block; background-color: red; border: 2px solid #666; margin-left: 5px;
font: 20px Arial, sans-serif;
}
.language2
{
border-radius: 50%;
width: 15px;
height: 15px;
padding: 3px;
display:inline-block;
background-color: orange;
border: 2px solid #666;
margin-left: 5px;
font: 20px Arial, sans-serif;
}
.language3
{
border-radius: 50%;
width: 15px;
height: 15px;
padding: 3px;
display:inline-block;
background-color: green;
border: 2px solid #666;
margin-left: 5px;
font: 20px Arial, sans-serif;
}

