I have a table and now I need to position a piece of text on the top border of it. To look like: Desired Text positioning Also to make it be resizable in a window as I have tried positioning it but it keeps moving around also when I use %'s. I have tried multiple things such as basic positioning like top, left. Also fixed positioning but every time I line it up specifically then change the size of the window it changes the size/position of the text and the background.
The html file is here html:
<!DOCTYPE html>
<html>
<head>
<title>Exercise 4</title>
<link rel="stylesheet" type="text/css" href="/css/reset.css">
<link rel="stylesheet" type="text/css" href="/css/exercise4.css">
</head>
<body>
<header>
<h4>Shirt order form</h4>
</header>
<table>
<!-- <tr>
<th>Shirt order form</th>
</tr> -->
<form method="GET" action="http://webprojects.eecs.qmul.ac.uk/un300/week4/week4_process.php">
<tr>
<td>
<div class="container">
<label for="choice">Shirt size</label>
</div>
<select name="choices">
<option value="" disabled selected>Choose size</option>
<option>XS</option>
<option>S</option>
<option>M</option>
<option>L</option>
<option>XL</option>
</select>
<div class="container">
<label for="radio">Sleeves</label>
</div>
<input type="radio" name="Sleeves" value="1" checked>Short</br>
<input type="radio" name="Sleeves" value="2">Long
<h4>Choose a colour</h4>
<input type="color" name="colorChoice">
<h4>Quantity</h4>
<input type="number" min="1" max="10" name="Quantity" >
<h4>Date Requested </h4>
<input type="date">
</td>
</tr>
<tr>
<td>
<div class="container">
<label for="name">Name</label>
</div>
<input type="name">
<div class="container">
<label for="email">Email</label>
</div>
<input type="email" required>
<div class="container">
<label for="Telephone" >Telephone</label>
</div>
<section id="right">
<input type="tel" id="phone" name="phone" pattern="^\d{2}-\d{3}-\d{3}-\d{4}$" required>
<p>Example: 44-207-882-1234</p>
</section>
</td>
</tr>
<td>
<div class="container">
<label for="address">Address</label>
</div>
<input type="text" name="address">
<div class="container">
<label for="city">City</label>
</div>
<input type="text" name="city" list="cities">
<datalist id="cities">
<option>London</option>
<option>Paris</option>
<option>Hong Kong</option>
<option>Scotland</option>
</datalist>
<div class="container">
<label for="postcode">Postcode</label>
</div>
<input type="text" name="postcode">
</td>
<footer id="footer">
<tr>
<td>
<footer id="footer">
<label for="checkbox">Please keep me informed about future shirt designs</label>
<input type="checkbox" name="checkbox">
<div class="formRow space">
<input type="submit">
<input type="reset">
</div>
<p>© 2023 Shirt Order Form</p>
</footer>
</td>
</tr>
</form>
</table>
</body>
</html>
The css file is here css:
table, th, td {
border: 1px solid black;
}
table {
width: 75%;
background-color: rgb(121, 204, 121);
margin-top: 5vh;
}
.formRow {
/* display: table-row; */
display: flex; /* Set the formRow element to use flexbox */
justify-content: center; /* Center the child elements horizontally */
}
.container {
display: flex;
flex-direction: column;
}
#right {
display: flex;
flex-direction: row;
}
#right p {
margin-left: 3.6%;
display: flex;
flex-direction: row;
}
/* td {
white-space: nowrap;
} */
.space {
margin-top: 10%;
/* margin-bottom: 5%; */
}
input[type="submit"] {
background-color: #4CAF50; /* Change the background color */
color: white; /* Change the font color */
padding: 12px 24px;
font-size: 16px; /* Set the font size */
cursor: pointer; /* Add a pointer cursor on hover */
border-radius: 5px;
margin: 25px;
}
input[type="reset"] {
background-color: #4CAF50; /* Change the background color */
color: white; /* Change the font color */
padding: 12px 24px;
font-size: 16px; /* Set the font size */
cursor: pointer; /* Add a pointer cursor on hover */
border-radius: 5px;
margin: 25px;
}
body {
max-width: 800px;
margin: auto;
}
#footer {
background-color: white;
padding-bottom: 5%;
}
header {
position: absolute;
/* top: 32px;
left: 120px; */
width: 50%;
background-color: #333;
color: #fff;
text-align: center;
/* margin-left: 20%;
margin-right: 20%;
margin-top: 20%;
margin-right: 20%; */
border: blue;
height: 5vh;
}
/* th {
background-color: green;
} */
You can use the <caption>element and style it as needed - see below. This is also the semantically recommended way, for example by MDN: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Styling_tables
table,
th,
td {
border: 1px solid black;
}
table {
width: 75%;
background-color: rgb(121, 204, 121);
margin-top: 5vh;
}
caption {
background: #fa0;
width: 60%;
margin: 0 auto;
position: relative;
top: 1em;
font-size: 18px;
font-weight: bold;
border: 1px solid #555;
padding: 4px;
}
.formRow {
/* display: table-row; */
display: flex;
/* Set the formRow element to use flexbox */
justify-content: center;
/* Center the child elements horizontally */
}
.container {
display: flex;
flex-direction: column;
}
#right {
display: flex;
flex-direction: row;
}
#right p {
margin-left: 3.6%;
display: flex;
flex-direction: row;
}
/* td {
white-space: nowrap;
} */
.space {
margin-top: 10%;
/* margin-bottom: 5%; */
}
input[type="submit"] {
background-color: #4CAF50;
/* Change the background color */
color: white;
/* Change the font color */
padding: 12px 24px;
font-size: 16px;
/* Set the font size */
cursor: pointer;
/* Add a pointer cursor on hover */
border-radius: 5px;
margin: 25px;
}
input[type="reset"] {
background-color: #4CAF50;
/* Change the background color */
color: white;
/* Change the font color */
padding: 12px 24px;
font-size: 16px;
/* Set the font size */
cursor: pointer;
/* Add a pointer cursor on hover */
border-radius: 5px;
margin: 25px;
}
body {
max-width: 800px;
margin: auto;
}
#footer {
background-color: white;
padding-bottom: 5%;
}
header {
position: absolute;
/* top: 32px;
left: 120px; */
width: 50%;
background-color: #333;
color: #fff;
text-align: center;
/* margin-left: 20%;
margin-right: 20%;
margin-top: 20%;
margin-right: 20%; */
border: blue;
height: 5vh;
}
/* th {
background-color: green;
} */<table>
<caption>Shirt order form</caption>
<form method="GET" action="http://webprojects.eecs.qmul.ac.uk/un300/week4/week4_process.php">
<tr>
<td>
<div class="container">
<label for="choice">Shirt size</label>
</div>
<select name="choices">
<option value="" disabled selected>Choose size</option>
<option>XS</option>
<option>S</option>
<option>M</option>
<option>L</option>
<option>XL</option>
</select>
<div class="container">
<label for="radio">Sleeves</label>
</div>
<input type="radio" name="Sleeves" value="1" checked>Short</br>
<input type="radio" name="Sleeves" value="2">Long
<h4>Choose a colour</h4>
<input type="color" name="colorChoice">
<h4>Quantity</h4>
<input type="number" min="1" max="10" name="Quantity">
<h4>Date Requested </h4>
<input type="date">
</td>
</tr>
<tr>
<td>
<div class="container">
<label for="name">Name</label>
</div>
<input type="name">
<div class="container">
<label for="email">Email</label>
</div>
<input type="email" required>
<div class="container">
<label for="Telephone">Telephone</label>
</div>
<section id="right">
<input type="tel" id="phone" name="phone" pattern="^\d{2}-\d{3}-\d{3}-\d{4}$" required>
<p>Example: 44-207-882-1234</p>
</section>
</td>
</tr>
<td>
<div class="container">
<label for="address">Address</label>
</div>
<input type="text" name="address">
<div class="container">
<label for="city">City</label>
</div>
<input type="text" name="city" list="cities">
<datalist id="cities">
<option>London</option>
<option>Paris</option>
<option>Hong Kong</option>
<option>Scotland</option>
</datalist>
<div class="container">
<label for="postcode">Postcode</label>
</div>
<input type="text" name="postcode">
</td>
<footer id="footer">
<tr>
<td>
<footer id="footer">
<label for="checkbox">Please keep me informed about future shirt designs</label>
<input type="checkbox" name="checkbox">
<div class="formRow space">
<input type="submit">
<input type="reset">
</div>
<p>© 2023 Shirt Order Form</p>
</footer>
</td>
</tr>
</form>
</table>