Is there an HTML attribute available equivalent to the CSS property border-collapse: collapse;?
I am trying to achieve the same 1px border with HTML only, and not using css.
table{
border-collapse: collapse;
}
<table border="1px" cellpadding="3">
<tr>
<td>Row 1</td>
<td>Row 1</td>
<td>Row 1</td>
</tr>
<tr>
<td>Row 2</td>
<td>Row 2</td>
<td>Row 2</td>
</tr>
</table>
You could try cellspacing.
<table border="1px" cellspacing="0" cellpadding="3">
<tr>
<td>Row 1</td>
<td>Row 1</td>
<td>Row 1</td>
</tr>
<tr>
<td>Row 2</td>
<td>Row 2</td>
<td>Row 2</td>
</tr>
</table>
Note: cellspacing doesn't overlap borders of adjacent cells, which CSS property does.
You can use cellspacing or cellpadding but it's deprecated in HTML5
i don't understand why you want to stop using CSS because that is what css do
you can use boostrap the css is included inside.
for more info go to w3chools
<div class="container">
<h2>Basic Table</h2>
<p>The .table class adds basic styling (light padding and only horizontal dividers) to a table:</p>
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
</tbody>
</table>
</div>
Related
I have a HTML question:
If I have a table with multiple thead, on printing this page, the repetition on top of next page is first thead and not the last one.
Example:
<table>
<thead>
<tr>
<th>TH 1</th>
<th>TH 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>TD 1</td>
<td>TD 2</td>
</tr>
<tr>
<td>TD 1</td>
<td>TD 2</td>
</tr>
<tr>
<td>TD 1</td>
<td>TD 2</td>
</tr>
<tr>
<td>TD 1</td>
<td>TD 2</td>
</tr>
</tbody>
<thead>
<tr>
<th>TH 3</th>
<th>TH 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>TD 1</td>
<td>TD 2</td>
</tr>
<tr>
<td>TD 1</td>
<td>TD 2</td>
</tr>
<tr>
<td>TD 1</td>
<td>TD 2</td>
</tr>
<tr>
<td>TD 1</td>
<td>TD 2</td>
</tr>
</tbody>
The second-page header shows TH1 and TH2 instead of TH3 and TH4 during print preview.
Is there a way to print TH3 and TH4?
I need to style the last row in each group (that is Row 3, Row 5 and Row 8). My css sample only apply style to Row 8.
Code:
tr.row:last-child td {
background-color: red;
}
<table>
<tr class="group">
<td>Group 1</td>
</tr>
<tr class="row">
<td>Row 1</td>
</tr>
<tr class="row">
<td>Row 2</td>
</tr>
<tr class="row">
<td>Row 3</td>
</tr>
<tr class="group">
<td>Group 2</td>
</tr>
<tr class="row">
<td>Row 4</td>
</tr>
<tr class="row">
<td>Row 5</td>
</tr>
<tr class="group">
<td>Group 3</td>
</tr>
<tr class="row">
<td>Row 6</td>
</tr>
<tr class="row">
<td>Row 7</td>
</tr>
<tr class="row">
<td>Row 8</td>
</tr>
</table>
I use Bootstrap with datatables and would like to hide specific table rows using pure CSS, without any JavaScript / jQuery.
I thought, I can do it like this, but it doesn't work, unfortunately:
input[name=hide_rows] + table tr.hide-this-row {
display: table-row;
}
input[name=hide_rows]:checked + table tr.hide-this-row {
display: none;
}
<div class="form-group">
<label for="hide_rows">Hide rows?</label>
<input type="checkbox" id="hide_rows" name="hide_rows" checked>
</div>
<div class="table-responsive">
<table class="table table-condensed table-hover" id="some-table" data-order='[[ 0, "desc" ]]'>
<thead>
<tr>
<th>Head #1</th>
<th>Head #2</th>
<th>Head #3</th>
</tr>
</thead>
<tbody>
<tr class="show-this-row">
<td>Row #1</td>
<td>Row #1</td>
<td>Row #1</td>
</tr>
<tr class="hide-this-row">
<td>Row #2</td>
<td>Row #2</td>
<td>Row #2</td>
</tr>
<tr class="show-this-row">
<td>Row #3</td>
<td>Row #3</td>
<td>Row #3</td>
</tr>
#endforeach
</tbody>
</table>
</div>
Please note, that Bootstrap and the datatable is adding some divs there and at the end, it has some more HTML tags between.
That's the reason, why I don't would like to use this solution:
input[name=hide_rows] + div > div > div > table tr.hide-this-row {
display: table-row;
}
input[name=hide_rows]:checked + div > div > div > table tr.hide-this-row {
display: none;
}
<div class="table-responsive">
<label for="hide_rows">Hide rows?</label>
<input type="checkbox" id="hide_rows" name="hide_rows" checked>
<table class="table table-condensed table-hover" id="some-table" data-order='[[ 0, "desc" ]]'>
<thead>
<tr>
<th>Head #1</th>
<th>Head #2</th>
<th>Head #3</th>
</tr>
</thead>
<tbody>
<tr class="show-this-row">
<td>Row #1</td>
<td>Row #1</td>
<td>Row #1</td>
</tr>
<tr class="hide-this-row">
<td>Row #2</td>
<td>Row #2</td>
<td>Row #2</td>
</tr>
<tr class="show-this-row">
<td>Row #3</td>
<td>Row #3</td>
<td>Row #3</td>
</tr>
#endforeach
</tbody>
</table>
</div>
I don't like this solution as you have to count and add that much divs as there are between and I also had to move the checkbox outside the <div class="form-group"> and inside the <div class="table-responsive">.
It would be much better, if there is an easier solution like the below code for the first shown HTML code:
input[name=hide_rows] + * table tr.hide-this-row {
display: table-row;
}
input[name=hide_rows]:checked + * table tr.hide-this-row {
display: none;
}
The last CSS code is not working, unfortunately.
You can achieve this with minor change in your html. If you move your table-responsive div inside the form-group below checkbox then you will be able to hide the rows.
Here is a code:
<div class="form-group">
<label for="hide_rows">Hide rows?</label>
<input type="checkbox" id="hide_rows" name="hide_rows" checked/>
<div class="table-responsive">
<table class="table table-condensed table-hover" id="some-table" data-order='[[ 0, "desc" ]]'>
<thead>
<tr>
<th>Head #1</th>
<th>Head #2</th>
<th>Head #3</th>
</tr>
</thead>
<tbody>
<tr class="show-this-row">
<td>Row #1</td>
<td>Row #1</td>
<td>Row #1</td>
</tr>
<tr class="hide-this-row">
<td>Row #2</td>
<td>Row #2</td>
<td>Row #2</td>
</tr>
<tr class="show-this-row">
<td>Row #3</td>
<td>Row #3</td>
<td>Row #3</td>
</tr>
#endforeach
</tbody>
</table>
</div>
</div>
CSS:
input[name=hide_rows] + .table-responsive .hide-this-row {
display: table-row;
}
input[name=hide_rows]:checked + .table-responsive .hide-this-row {
display: none;
}
Snippet:
input[name=hide_rows] + .table-responsive .hide-this-row {
display: table-row;
}
input[name=hide_rows]:checked + .table-responsive .hide-this-row {
display: none;
}
<div class="form-group">
<label for="hide_rows">Hide rows?</label>
<input type="checkbox" id="hide_rows" name="hide_rows" checked/>
<div class="table-responsive">
<table class="table table-condensed table-hover" id="some-table" data-order='[[ 0, "desc" ]]'>
<thead>
<tr>
<th>Head #1</th>
<th>Head #2</th>
<th>Head #3</th>
</tr>
</thead>
<tbody>
<tr class="show-this-row">
<td>Row #1</td>
<td>Row #1</td>
<td>Row #1</td>
</tr>
<tr class="hide-this-row">
<td>Row #2</td>
<td>Row #2</td>
<td>Row #2</td>
</tr>
<tr class="show-this-row">
<td>Row #3</td>
<td>Row #3</td>
<td>Row #3</td>
</tr>
#endforeach
</tbody>
</table>
</div>
</div>
You can also check it here
This question already has answers here:
How do you use colspan and rowspan in HTML tables?
(11 answers)
Closed 5 years ago.
I'm developing a webpage where I want to insert a table as seen in the image. I know how to use HTML tables, but I'm confused of creating this. I tried a lot to do this, but they are not working as I want. Please If some one could give me a guidance to develop this table I really appreciate it.
<table class="table table-bordered table-responsive" style="border-collapse: collapse; text-align: center; float: right;" border="1">
<tbody>
<tr>
<td></td>
<td style="text-align: center;" colspan="2">Table Data</td>
</tr>
<tr>
<th>Type </th>
<th>Orders<br />Phone/Fax/Email/Post</th>
<th>Number</th>
</tr>
</tbody>
<tbody>
<tr>
<td>Type 1</td>
<td>Order 1</td>
<td>Num 1</td>
</tr>
<tr>
<td>Type 2</td>
<td>Order 2</td>
<td>Num 2</td>
</tr>
<tr>
<td>Type 3</td>
<td>Order 3</td>
<td>Num 3</td>
</tr>
<tr>
<td>Type 4</td>
<td>Order 4</td>
<td>Num 4</td>
</tr>
<tr>
<td>Type 5</td>
<td>Order 5</td>
<td>Num 5</td>
</tr>
</tbody>
</table>
This does not give my desired output
File
Save as
choose filename
change file type to HTML Page
inspect HTML
If you want to handcraft this table have a look at colspan and rowspan or this SO question
I'm trying to create a table in HTML. 7 rows in the first column, only 1 in the second. I can't figure it out. I feel like I am missing something simple.
You can simply put a second td element in the first row, and change its rowspan to 7
<table border="1" style="width:100%">
<tr>
<td>a</td>
<td rowspan="7">b</td>
</tr>
<tr>
<td>a</td>
</tr>
<tr>
<td>a</td>
</tr>
<tr>
<td>a</td>
</tr>
<tr>
<td>a</td>
</tr>
<tr>
<td>a</td>
</tr>
<tr>
<td>a</td>
</tr>
</table>
You can use the rowspan attribute to have a cell span multiple rows.
Code:
<html>
<body>
<table>
<tr>
<td>Row 1</td>
<td rowspan="7">Row 1</td>
</tr>
<tr>
<td>Row 2</td>
</tr>
<tr>
<td>Row 3</td>
</tr>
<tr>
<td>Row 4</td>
</tr>
<tr>
<td>Row 5</td>
</tr>
<tr>
<td>Row 6</td>
</tr>
<tr>
<td>Row 7</td>
</tr>
</table>
</body>
</html>
You want to use the rowspan attribute to stretch the second column over the rows of the first column, as shown below.
Reference: http://www.w3.org/TR/html401/struct/tables.html#h-11.2.6.1
td {
border: 1px solid gray;
}
<table>
<tr>
<td>C 1</td>
<td rowspan="7">C 2</td>
</tr>
<tr>
<td>C 1</td>
</tr>
<tr>
<td>C 1</td>
</tr>
<tr>
<td>C 1</td>
</tr>
<tr>
<td>C 1</td>
</tr>
<tr>
<td>C 1</td>
</tr>
<tr>
<td>C 1</td>
</tr>
</table>