I am writing my final project at PHP and JS. I need help with the html and CSS styling.
This is my sign form, I want help in 2 things.
I want to do that the whole row (tr) that include th while be with border, now I know to do it only that every th have border.
I want to divide the table to sections and to style every section in other CSS code.
How can I do it?
This my HTML code:
<body>
<form>
<table id="t">
<tr>
<th>Basic info</th>
<th>Contact info</th>
<th>About me</th>
</tr>
<tr>
<td><input placeholder="First name"></td>
<td><input placeholder="Phone"></td>
<td rowspan="3"><textarea rows="8" placeholder="About me"></textarea></td>
</tr>
<tr>
<td><input placeholder="Last name"></td>
<td><input placeholder="Area"></td>
</tr>
<tr>
<td><input placeholder="Degree"></td>
<td><input placeholder="Email"></td>
</tr>
<tr><th colspan="2">Social networks</th></tr>
<tr>
<td><input row placeholder="Facebook link"></td>
<td><input row placeholder="Website link"></td>
</tr>
<tr>
<td><input row placeholder="Twitter link"></td>
<td><input row placeholder="Medium link"></td>
</tr>
<tr>
<td><input row placeholder="Instagram link"></td>
<td><input row placeholder="Google link"></td>
</tr>
<tr><td colspan="2"><button type="submit">שלח</button></td></tr>
</table>
</form>
</body>
This is my CSS:
table{
margin: 16px;
text-align: center;
}
td{
padding: 10px;
justify-content: space-between;
}
#t textarea{
width: 100%;
height: 100%;
}
tr>th{
margin-top: 10px;
border: 1px solid red;
}
For (1), tr's can only have borders when the table is border-collapse:collapse.
For (2), you can put rows in <thead>, <tbody>, <tfoot> sections and style those separately.
Maybe you can have multiple <tbody> sections and use nth-of-type to select them but I don't know.
Differences in the below
addition of thead, tbody, tfoot in the html
style tbody as an example
border-collapse:collapse on the table style
tr style on the first tr
table {
margin: 16px;
text-align: center;
border-collapse: collapse;
}
td {
padding: 10px;
justify-content: space-between;
}
#t textarea {
width: 100%;
height: 100%;
}
tbody {
font-style: italic;
}
<form>
<table id="t">
<thead>
<tr style="border:solid 1px">
<th>Basic info</th>
<th>Contact info</th>
<th>About me</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input placeholder="First name">
</td>
<td>
<input placeholder="Phone">
</td>
<td rowspan="3">
<textarea rows="8" placeholder="About me"></textarea>
</td>
</tr>
<tr>
<td>
<input placeholder="Last name">
</td>
<td>
<input placeholder="Area">
</td>
</tr>
<tr>
<td>
<input placeholder="Degree">
</td>
<td>
<input placeholder="Email">
</td>
</tr>
<tr>
<th colspan="2">Social networks</th>
</tr>
<tr>
<td>
<input row placeholder="Facebook link">
</td>
<td>
<input row placeholder="Website link">
</td>
</tr>
<tr>
<td>
<input row placeholder="Twitter link">
</td>
<td>
<input row placeholder="Medium link">
</td>
</tr>
<tr>
<td>
<input row placeholder="Instagram link">
</td>
<td>
<input row placeholder="Google link">
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">
<button type="submit">שלח</button>
</td>
</tr>
</tfoot>
</table>
</form>
Related
I am very new to Bootstrap css, can any one help me to design table header like this, column is seperated by pipe like css
Below is css .
<style>
.table-bordered tbody tr td {
border: none !important;
}
.table-bordered tbody tr td input.form-control[type=text] {
border-radius: 0px !important;
}
#input_container {
position: relative;
direction: rtl;
}
#input_img {
position: absolute;
bottom: 4px;
right: 5px;
width: 24px;
height: 24px;
}
Here i have used "table table-bordered" class for table and using above css i have removed td border lines
<div class="container">
<table class="table table-bordered">
<thead>
<tr>
<th>Product Name</th>
<th>Color/Size</th>
<th>Qty. Needed</th>
<th>Need By Date</th>
<th>Special Instructions</th>
<th>Art Files</th>
</tr>
</thead>
<tbody>
<tr>
<td><input class="form-control" id="Text1" type="text" /></td>
<td>
<div id="input_container">
<input class="form-control" type="text" id="input" value="">
<img src="~/Images/calendarImg.png" id="input_img">
</div>
</td>
<td><input class="form-control" id="Text1" type="text" /></td>
<td>
<input class="form-control" type="text" />
</td>
<td><input class="form-control" id="Text1" type="text" /></td>
<td><input class="form-control" id="Text1" type="text" /></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="6"><a>Add Rows</a></td>
</tr>
</tfoot>
</table>
I have created a demo for you. Take help and modify as per your requirement.
<table frame="box" rules="none" cellpadding="2" cellspasing="5"> <tr style="background-color:yellow; ">
<td colspan="4">
<table style="width:100%">
<tr>
<td style="width:25%;border-right: thin solid #000;">First</td>
<td style="width:25%;text-align:center; border-right: 1px solid #000;">Second</td>
<td style="width:25%;text-align:center;border-right: 1px solid #000;">Third</td>
<td style="width:25%;text-align:center;">Fourth</td>
</tr>
</table>
</td> </tr> <tr>
<tr>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
</tr> </tr> </table>
click here to see it in fiddle
Here there is a small example of my page. I need to disable all input fields but the scrollbar. This works perfectly on Chrome and Firefox, but not with IE.
tbody{
display:block;
height: 50px;
overflow-y: scroll;
}
<fieldset disabled>
<table>
<thead>
<tr><th>test</th></tr>
</thead>
<tbody>
<tr> <td> <input type="text"/> </td> </tr>
<tr> <td> <input type="text"/> </td> </tr>
<tr> <td> <input type="text"/> </td> </tr>
<tr> <td> <input type="text"/> </td> </tr>
<tr> <td> <input type="text"/> </td> </tr>
</tbody>
</table>
</fieldset>
Any suggestion?
Maybe like this?
tbody{
display:block;
height: 50px;
overflow-y: scroll;
}
<fieldset>
<table>
<tbody>
<tr> <td> <input type="text" disabled /> </td> </tr>
<tr> <td> <input type="text" disabled /> </td> </tr>
<tr> <td> <input type="text" disabled /> </td> </tr>
<tr> <td> <input type="text" disabled /> </td> </tr>
<tr> <td> <input type="text" disabled /> </td> </tr>
</tbody>
</table>
</fieldset>
Or using pointer-events (still, user can tab through the inputs, but that can be prevented with tabindex="-1", but then again, why not just add disabled)
fieldset tbody {
display: inline-block;
height: 50px;
overflow-y: scroll;
}
fieldset tbody input {
pointer-events: none;
}
<fieldset>
<table>
<tbody>
<tr> <td> <input type="text" /> </td> </tr>
<tr> <td> <input type="text" /> </td> </tr>
<tr> <td> <input type="text" /> </td> </tr>
<tr> <td> <input type="text" /> </td> </tr>
<tr> <td> <input type="text" /> </td> </tr>
</tbody>
</table>
</fieldset>
Or use an extra div
fieldset div {
display: inline-block;
height: 50px;
overflow-y: scroll;
}
<fieldset>
<div>
<table disabled>
<tbody>
<tr> <td> <input type="text" /> </td> </tr>
<tr> <td> <input type="text" /> </td> </tr>
<tr> <td> <input type="text" /> </td> </tr>
<tr> <td> <input type="text" /> </td> </tr>
<tr> <td> <input type="text" /> </td> </tr>
</tbody>
</table>
</div>
</fieldset>
I suggest wrapping the fieldset in an extra div and apply your styles there.
IE seems to disable the scrollbar functionality on disabled elements.
.box {
display: inline-block;
height: 80px; overflow-y: scroll;
}
<div class="box">
<fieldset disabled>
<table>
<tbody>
<tr> <td> <input type="text"/> </td> </tr>
<tr> <td> <input type="text"/> </td> </tr>
<tr> <td> <input type="text"/> </td> </tr>
<tr> <td> <input type="text"/> </td> </tr>
<tr> <td> <input type="text"/> </td> </tr>
</tbody>
</table>
</fieldset>
</div>
I have two different tables and on the second table I want to apply the border="border" atttribute as CSS. How can accomplish this correctly?
<table>
<!-- Text widgets for the customer's name and address -->
<tr>
<td>Buyer's Name:</td>
<td>
<input type="text" name="name" size="30" />
</td>
</tr>
<tr>
<td>Street Address:</td>
<td>
<input type="text" name="street" size="30" />
</td>
</tr>
<tr>
<td>City, State, Zip:</td>
<td>
<input type="text" name="city" size="30" />
</td>
</tr>
</table>
<table class="tableProduct">
<!-- First, the column headings -->
<tr>
<th>Product</th>
<th>Price</th>
<th>Quantity</th>
</tr>
<!-- Now, the table data entries -->
<tr>
<td>Unpopped Popcorn (1 lb.)</td>
<td>$3.00</td>
<td class="tdcenter">
<input type="text" name="unpop" size="3" />
</td>
</tr>
<tr>
<td>Caramel Popcorn (2 lb. canister)</td>
<td>$3.50</td>
<td class="tdcenter">
<input type="text" name="caramel" size="3" />
</td>
</tr>
<tr>
<td>Caramel Nut Popcorn (2 lb. canister)</td>
<td>$4.50</td>
<td class="tdcenter">
<input type="text" name="caramelnut" size="3" />
</td>
</tr>
</table>
I tried creating the classs tableProduct with the following:
.tableProduct {
border: 1px solid black;
border-collapse: collapse;
}
But it just creates a border around the table. I want it to create a border within each cell.
Here we go ... you weren't that far from it
.tableProduct {
border-collapse: collapse;
}
.tableProduct th, /* this line is for the headers */
.tableProduct td {
border: 1px solid black;
}
<table>
<!-- Text widgets for the customer's name and address -->
<tr>
<td>Buyer's Name:</td>
<td>
<input type="text" name="name" size="30" />
</td>
</tr>
<tr>
<td>Street Address:</td>
<td>
<input type="text" name="street" size="30" />
</td>
</tr>
<tr>
<td>City, State, Zip:</td>
<td>
<input type="text" name="city" size="30" />
</td>
</tr>
</table>
<table class="tableProduct">
<!-- First, the column headings -->
<tr>
<th>Product</th>
<th>Price</th>
<th>Quantity</th>
</tr>
<!-- Now, the table data entries -->
<tr>
<td>Unpopped Popcorn (1 lb.)</td>
<td>$3.00</td>
<td class="tdcenter">
<input type="text" name="unpop" size="3" />
</td>
</tr>
<tr>
<td>Caramel Popcorn (2 lb. canister)</td>
<td>$3.50</td>
<td class="tdcenter">
<input type="text" name="caramel" size="3" />
</td>
</tr>
<tr>
<td>Caramel Nut Popcorn (2 lb. canister)</td>
<td>$4.50</td>
<td class="tdcenter">
<input type="text" name="caramelnut" size="3" />
</td>
</tr>
</table>
You need to apply the styling to the th and td elements as well.
table, th, td {
border: 1px solid black;
}
You can read up on table styling more here.
table.tableProduct td {
border: 1px black solid;
border-collapse: collapse;
}
That will put a border around all of your table datas individually.
For good measure, you might want to add border-collapse in there. That way you're looking at one solid border, instead of two competing border lines - one from the table and one from the table data.
Edit: With css Combinators! By putting a space between table.tableProduct and td, we're saying, please apply these CSS rules to all td elements that a descendants of a table element with the class tableProduct.
I am having trouble getting a border on a table. Here is the html for the table it shows having a border in Dreamweaver but not on the live webpage. I also have other tables on the page and do not want them to have the borders just this one.
<table style="width: 100%;" border="1" bordercolor="#000000">
<tr>
<td colspan="2" align="center" valign="middle">Please comeplete form</td>
</tr>
<tr>
<td width="50%">Event Name:</td>
<td>
<input type="text" name="name" id="name"></td>
</tr>
<tr>
<td>Date (YYYY-MM-DD):</td>
<td>
<textarea name="date" id="date"></textarea></td>
</tr>
<tr>
<td>Link to page:</td>
<td>
<input type="text" name="link" id="link"></td>
</tr>
<tr>
<td>Status:</td>
<td>
<input type="text" name="status" id="status"></td>
</tr>
<tr>
<td colspan="2" align="center" valign="middle"><input type="submit" name="submit" id="submit" value="Submit"></td>
</tr>
</table>
You can add CSS to bring it up to standard
Something like:
table.mytable{
border: 1px solid #000000;
}
and then add a class="mytable" attribute to your table
You can initially style it like:
table,td,th {
border-collapse:collapse;
border: 1px solid #000000;
}
And in this way further you can add this as a class.
I'm trying to create a form that clients would complete via the web, so far I've resorted to using various tables butted up against each other to get the view I'm looking for, one of the issues is that when the tables are next to each other the borders appear twice as thick.
I think I could probably turn certain borders on and off but this would be a pain to manage, is there a better way I should be doing this?
My form looks something like this (jsfiddle at http://jsfiddle.net/5AXKa/)
<html>
<head>
<style type="text/css">
#form table
{
width:100%;
}
td
{
border: 1px solid black;
}
table
{
border:1px solid black;
}
#form
{
width:1000px;
/*border:1px solid black;*/
}
.field
{
border-right:none;
}
table, tr, td
{
border-collapse:collapse;
}
#Logo
{
width:30%;
}
#TestName
{
width:40%;
}
#TestNumber
{
width:30%;
}
#heading
{
height:70px;
}
.title
{
text-align:center;
}
.Data
{
border-left:none;
border-right:none;
}
</style>
</head>
<body>
<div id="form">
<table>
<tr id="heading">
<td id="Logo">LOGO GOES HERE</td>
<td id="TestName">TEST NAME</td>
<td id="TestNumber">TEST NUMBER</td>
</tr>
</table>
<table id="CommonData">
<tr>
<td class="field">CLIENT:-</td>
<td class="data"></td>
<td class="field">SITE:-</td>
<td class="data"></td>
<td class="field">Contract NO:-</td>
<td class="data"></td>
</tr>
<tr>
<td class="field">DUTY:-</td>
<td class="data"></td>
<td class="field">TAG No:-</td>
<td class="data"></td>
<td class="field">Loop No:-</td>
<td class="data"></td>
</tr>
<tr>
<td class="field">SYSTEM No:-</td>
<td class="data"></td>
<td class="field">SYSTEM REF:-</td>
<td class="data"></td>
<td class="field">DWG No:-</td>
<td class="data"></td>
</tr>
<tr>
<td class="field">CTP No:-</td>
<td class="data"></td>
<td colspan="4"></td>
</tr>
</table>
<table>
<tr class="title">
<td>INSTRUMENT / APPLIANCE</td>
</tr>
</table>
<table style="float:left;width:50%">
<tr>
<td colspan="2">INSTRUMENT DETAILS:</td>
</tr>
<tr>
<td>MANUFACTURER</td>
<td><input type="text" name="blah" style="width:100%"/></td>
</tr>
<tr>
<td>SERIAL No:-</td>
<td><input type="text" name="blah" style="width:100%"/></td>
</tr>
<tr>
<td>SIZE:-</td>
<td><input type="text" name="blah" style="width:100%"/></td>
</tr>
<tr>
<td>SERVICE DATA SHEET REF:-</td>
<td><input type="text" name="blah" style="width:100%"/></td>
</tr>
<tr>
<td>POWER SUPPLY:-</td>
<td><input type="text" name="blah" style="width:100%"/></td>
</tr>
<tr>
<td>MODEL NO:-</td>
<td><input type="text" name="blah" style="width:100%"/></td>
</tr>
<tr>
<td>IP RATING:-</td>
<td><input type="text" name="blah" style="width:100%"/></td>
</tr>
<tr>
<td>RANGE/SPAN</td>
<td><input type="text" name="blah" style="width:100%"/></td>
</tr>
</table>
<table style="float:right; width:50%">
<tr>
<td>INSTRUMENT TYPE</td>
<td>TICK BOX</td>
</tr>
<tr>
<td>PROXIMITY SWITCH</td>
<td><input type="text" name="blah" style="width:100%"/></td>
</tr>
<tr>
<td>LIMIT SWITCH</td>
<td><input type="text" name="blah" style="width:100%"/></td>
</tr>
<tr>
<td>FLOAT SWITCH</td>
<td><input type="text" name="blah" style="width:100%"/></td>
</tr>
<tr>
<td>ULTRASONIC</td>
<td><input type="text" name="blah" style="width:100%"/></td>
</tr>
<tr>
<td>THERMOCOUPLE</td>
<td><input type="text" name="blah" style="width:100%"/></td>
</tr>
<tr>
<td>PRESSURE SWITCH</td>
<td><input type="text" name="blah" style="width:100%"/></td>f
</tr>
<tr>
<td>TEMPERATURE SWITCH</td>
<td><input type="text" name="blah" style="width:100%"/></td>
</tr>
<tr>
<td>FLOW SWITCH</td>
<td><input type="text" name="blah" style="width:100%"/></td>
</tr>
<tr>
<td>CONDUCITIVITY METER</td>
<td><input type="text" name="blah" style="width:100%"/></td>
</tr>
<tr>
<td>TURBIDITY METER</td>
<td><input type="text" name="blah" style="width:100%"/></td>
</tr>
<tr>
<td>CHEMICAL RESIDUAL ANALYSER</td>
<td><input type="text" name="blah" style="width:100%"/></td>
</tr>
<tr>
<td>FLOW METER</td>
<td><input type="text" name="blah" style="width:100%"/></td>
</tr>
<tr>
<td>PH METER</td>
<td><input type="text" name="blah" style="width:100%"/></td>
</tr>
</table>
<table>
<tr class="title">
<td>MONITOR / CONVERTER</td>
</tr>
<table>
<table>
<tr>
<td>PLANT UNIT:-</td>
<td><input type="text" name="blah" style="width:100%"/></td>
<td>INSTRUMENT TYPE:-</td>
<td><input type="text" name="blah" style="width:100%"/></td>
</tr>
<tr>
<td>SERIAL No:-</td>
<td><input type="text" name="blah" style="width:100%"/></td>
<td>SPAN:-</td>
<td><input type="text" name="blah" style="width:100%"/></td>
</tr>
<tr>
<td>POWER SUPPLY:-</td>
<td><input type="text" name="blah" style="width:100%"/></td>
<td>OTHER:-</td>
<td><input type="text" name="blah" style="width:100%"/></td>
</tr>
<table>
</body>
</html>
Simplify your table structure. If possible, use a single table, with one item on one row—there is normally no need to simulate printed forms (where you try to put everything on one sheet of paper) when designing a web form. Don’t use all uppercase, and put heading-like items in bold to clarify the structure of the form. Do not set widths for cells—it is part of the basic benefits of using tables that you can leave width allocation to browsers.
Your problems with borders are just one symptom of too complicated a design. When using a single table, adjacent browsers collapse when you just set cellspacing=0 in the table tag or border-collapse: collapse in CSS.
Instead of using a bunch of tables with a single div, you can use divs and specify the margin around the div.
This is a beginning.
Use a fieldset for each column.
Put every label and input in a div.
CSS:
fieldset {
float: left;
}
label {
clear: both; // Start the label at a new line
display: block;
float: left;
width: 100px;
{
input {
display: block;
float: left;
}
HTML:
<div><label for="field1">Field1</label><input type="text" name="field1" id="field1" /></div>
<div><label for="field1">Field2</label><input type="text" name="field2" id="field2" /></div>
etc...