I'm trying to change the alignment of specific columns of text to the right. Tried using class and it does not work. I even tried to use id element and it does not work either.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf=8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Book Ordering System</title>
</head>
<style>
.top-bottom {
background-color: skyblue;
}
.total_column {
background-color: silver;
}
.all:hover {
background-color: yellow;
}
</style>
<body>
<h1>Book Ordering System</h1>
<table border="2">
<form method="post" action="file.php">
<tr style="font-weight:bold" ; class="top-bottom all">
<td>No.</td>
<td>Book Title</td>
<td>Author</td>
<td>Category</td>
<td>Unit Price</td>
<td>Quantity</td>
<td>Total</td>
</tr>
<tr class="all">
<td>1</td>
<td>
<label for="sec1"></label>
<input type="text" name="sec1" id="sec1" value="" />
</td>
<td>
<label for="sec1.1"></label>
<input type="text" name="sec1.1" id="sec1.1" value="" />
</td>
<td>
<select name="category" id="category">
<option value="choose">Please choose the category...</option>
<option value="biz">Business</option>
<option value="fiction">Fiction</option>
<option value="maths">Mathematics</option>
<option value="tech">Technology</option>
</select>
</td>
<td>
<label for="sec1.2"></label>
<input type="text" name="sec1.2" id="sec1.2" value="0.00" />
</td>
<td>
<label for="sec1.3"></label>
<input type="text" name="sec1.3" id="sec1.3" value="0" />
</td>
<td>
<label for="sec1.4"></label>
<input type="text" name="sec1.4" id="sec1.4" value="0.00" readonly="readonly" class="total_column" />
</td>
</tr>
<tr class="all">
<td>2</td>
<td>
<label for="sec1"></label>
<input type="text" name="sec1" id="sec1" value="" />
</td>
<td>
<label for="sec1.1"></label>
<input type="text" name="sec1.1" id="sec1.1" value="" />
</td>
<td>
<select name="category" id="category">
<option value="choose">Please choose the category...</option>
<option value="biz">Business</option>
<option value="fiction">Fiction</option>
<option value="maths">Mathematics</option>
<option value="tech">Technology</option>
</select>
</td>
<td>
<label for="sec1.2"></label>
<input type="text" name="sec1.2" id="sec1.2" value="0.00" />
</td>
<td>
<label for="sec1.3"></label>
<input type="text" name="sec1.3" id="sec1.3" value="0" />
</td>
<td>
<label for="sec1.4"></label>
<input type="text" name="sec1.4" id="sec1.4" value="0.00" readonly="readonly" class="total_column " />
</td>
</tr>
<tr class="all">
<td>3</td>
<td>
<label for="sec1"></label>
<input type="text" name="sec1" id="sec1" value="" />
</td>
<td>
<label for="sec1.1"></label>
<input type="text" name="sec1.1" id="sec1.1" value="" />
</td>
<td>
<select name="category" id="category">
<option value="choose">Please choose the category...</option>
<option value="biz">Business</option>
<option value="fiction">Fiction</option>
<option value="maths">Mathematics</option>
<option value="tech">Technology</option>
</select>
</td>
<td>
<label for="sec1.2"></label>
<input type="text" name="sec1.2" id="sec1.2" value="0.00" />
</td>
<td>
<label for="sec1.3"></label>
<input type="text" name="sec1.3" id="sec1.3" value="0" />
</td>
<td>
<label for="sec1.4"></label>
<input type="text" name="sec1.4" id="sec1.4" value="0.00" readonly="readonly" class="total_column" />
</td>
</tr>
<tr class="all">
<td>4</td>
<td>
<label for="sec1"></label>
<input type="text" name="sec1" id="sec1" value="" />
</td>
<td>
<label for="sec1.1"></label>
<input type="text" name="sec1.1" id="sec1.1" value="" />
</td>
<td>
<select name="category" id="category">
<option value="choose">Please choose the category...</option>
<option value="biz">Business</option>
<option value="fiction">Fiction</option>
<option value="maths">Mathematics</option>
<option value="tech">Technology</option>
</select>
</td>
<td>
<label for="sec1.2"></label>
<input type="text" name="sec1.2" id="sec1.2" value="0.00" />
</td>
<td>
<label for="sec1.3"></label>
<input type="text" name="sec1.3" id="sec1.3" value="0" />
</td>
<td>
<label for="sec1.4"></label>
<input type="text" name="sec1.4" id="sec1.4" value="0.00" readonly="readonly" class="total_column" />
</td>
</tr>
<tr class="all">
<td>5</td>
<td>
<label for="sec1"></label>
<input type="text" name="sec1" id="sec1" value="" />
</td>
<td>
<label for="sec1.1"></label>
<input type="text" name="sec1.1" id="sec1.1" value="" />
</td>
<td>
<select name="category" id="category">
<option value="choose">Please choose the category...</option>
<option value="biz">Business</option>
<option value="fiction">Fiction</option>
<option value="maths">Mathematics</option>
<option value="tech">Technology</option>
</select>
</td>
<td>
<label for="sec1.2"></label>
<input type="text" name="sec1.2" id="sec1.2" value="0.00" />
</td>
<td>
<label for="sec1.3"></label>
<input type="text" name="sec1.3" id="sec1.3" value="0" />
</td>
<td>
<label for="sec1.4"></label>
<input type="text" name="sec1.4" id="sec1.4" value="0.00" readonly="readonly" class="total_column" />
</td>
</tr>
<tr class="top-bottom all">
<td colspan="5" align="right"><input type="button" onclick="alert('Hello World!')" value="Calculate Grand Total Price"> </td>
<td colspan="2" align="right"><input type="text" name="sec3.1" id="sec3.1" value="0.00" readonly="readonly" /></td>
</tr>
</form>
</table>
</body>
</html>Result:
The text you are trying to align is inside input fields. You want to align the text instead of the input fields.
And then apply class="align-right" to all the td's you want to align right.