I am new to html and currently trying to indent the html tables and its contents. Lets say I have to use table and cannot use div for this question. The example 1 only uses html and example 2 uses both html and css to achieve the same task.
Question for example 1 : Is there any better way to do then this, ie without using css (See how I am using lots of for indentation)?
Question for example 2 : Am I better of using example 1 then example 2?
Which one of the two is better approach and is there any better approach then this?
Only using html (example 1)
<h1>Question & Answer</h1>
<table border="0">
<tr>
<td><input type="checkbox" name="cheese" id="cheese">
<label for="cheese">Do the test?</label>
</td>
</tr>
</table>
<td></td>
<td> </td>
<td style="vertical-align: baseline;"><INPUT name="all" type="radio"></td>
<td>Select if Sick</td>
<table border="0">
<tr>
<td> </td>
<td> </td>
<td><INPUT name="x" type="checkbox"></td>
<td>If fever enter correct temp</td>
<td>
<INPUT TYPE="text" size="8">
</td>
<tr>
<td> </td>
<td> </td>
<td><INPUT name="y" type="radio"></td>
<td>Blood Pressure in Pascal:</td>
</tr>
</table>
<table border="0">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td>High:</td>
<td>
<INPUT TYPE="text" size="8">
</td>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td>Low:</td>
<td>
<INPUT TYPE="text" size="8">
</td>
</tr>
</table>now using html and css (example 2)
.ItemTable {
width: 100%;
/*border: solid 1px #dbdce3;*/
}
.ItemTable td {
width: auto;
padding-left: 20px;
/*border: solid 1px #dbdce3;*/
}<h1>Question & Answer</h1>
<table>
<tr>
<td>
<input type="checkbox" name="cheese" id="cheese">
<label for="cheese">Do the test?</label>
</td>
</tr>
<tr>
<td>
<table class="ItemTable">
<tr>
<td>
<input type="radio" name="sick" id="sick">
<label for="sick">Select if Sick</label>
</td>
</tr>
<tr>
<td>
<table class="ItemTable">
<tr>
<td>
<input type="checkbox" name="temp" id="temp">
<label for="temp">If fever enter correct temp</label>
<input type="text" name="temp" id="temp">
<br>
<input type="radio" name="blood_press_pascal" id="blood_press_pascal">
<label for="blood_press_pascal">Blood Pressure in Pascal:</label>
</td>
</tr>
<tr>
<td>
<table class="ItemTable">
<tr>
<td>
<label for="blood_press_pascal">High:</label>
<input type="text" name="blood_press_pascal" id="blood_press_pascal">
<br>
<label for="blood_press_pascal">Low:</label>
<input type="text" name="blood_press_pascal" id="blood_press_pascal">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>CodePudding user response：
As per the specifications:
In a visual medium, CSS tables can also be used to achieve specific layouts. In this case, authors should not use table-related elements in the document language, but should apply the CSS to the relevant structural elements to achieve the desired layout.
You better use HTML Forms
Following is a sample code without a table or divs:
<html>
<head>
<style>
fieldset {
width: 350px;
padding: 0px;
border: 1px dotted black; /*remove if border not needed */
}
input[type="text"] {
width: 70px;
height: 1.2em;
}
.bp-group input[type="text"] {
float: right;
}
p {
margin: 5px;
}
</style>
</head>
<body>
<fieldset id="test" disabled>
<legend>
<label>
<input type="checkbox" name="club" onchange="test.disabled = !checked" />
Do the test?
</label>
</legend>
<p style="text-indent: 15px">
<input type="radio" name="sick" id="sick" />
<label for="sick">Select if Sick</label>
</p>
<p style="text-indent: 30px"
><input type="checkbox" name="temp" id="temp" />
<label for="temp">If fever enter correct temp</label>
<input type="text" name="temp" id="temp" />
</p>
<p style="text-indent: 30px">
<input type="radio" name="blood_press_pascal" id="blood_press_pascal" />
<label for="blood_press_pascal">Blood Pressure in Pascal:</label>
</p>
<div class=bp-group style="width: 190px">
<p style="text-indent: 55px">
<label for="blood_press_pascal">High:</label>
<input type="text" name="blood_press_pascal" id="blood_press_pascal" />
</p>
<p style="text-indent: 55px">
<label for="blood_press_pascal">Low:</label>
<input type="text" name="blood_press_pascal" id="blood_press_pascal" />
</p>
</div>
</fieldset>
</body>
</html>CodePudding user response：
The purpose of   is for non-breaking space between two words. It means that if you use a   between two words, they will be not affected for word wrapping.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<strong>qwerqwerqwerqwerqwerqwerqwerqwerqwerqwerqwerqwerqwerqwerqwerqwrqer WordAfter&nbsp</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo perferendis neque error ratione obcaecati minima, itaque dolor illo repudiandae tempore eligendi in odit inventore temporibus. Magnam eum perspiciatis impedit, quas rem culpa accusamus ut eligendi ipsum consectetur perferendis nulla molestias necessitatibus esse dolor temporibus illo accusantium nobis praesentium suscipit quod excepturi neque. Enim laboriosam rem deserunt, animi tempora voluptatibus quos mollitia soluta itaque nostrum omnis quibusdam molestias fuga deleniti reprehenderit cum, inventore odio iusto illo ea tenetur non iure facere aut. Sapiente earum eos expedita aspernatur. Quas vero provident ea vitae itaque fugit facilis, magnam recusandae repudiandae voluptas dicta sapiente?
</body>
</html>For styling you have to use CSS, because it's the goal of CSS and if you use the classes and properties correctly. You can modify the style easily.
Finally, for your first question. Yes, there is a better way (your second example) and you already have the answers for the rest.
Some recommendations:
- Use external css
- Use better class names for the indentation like IdentationLevelOne
- Maybe you should use the tag form instead of tables