Can someone please tell me how, to insert data in a row? I just want to write something in these 2 rows:
The red + are the cells in which i want to insert text. I tried many things but it always ended up
building a new line. I would appreciate help :)
My html code:
<!DOCTYPE html>
<html>
<head>
<title>HTML rowspan Attribute</title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
padding: 6px;
}
</style>
</head>
<body style = "text-align:center">
<table>
<tr>
<td>Ajay</td>
<TD ROWSPAN="3">Bild1</TD>
<TD>Bananas</TD>
<TD ROWSPAN="3">Bild2</TD>
</tr>
<tr>
<td>Priya1</td>
</tr>
<tr>
<td>Priya</td>
</tr>
</table>
</body>
</html>
You need to add data in second and third row, so you need to enter those data in second and third <tr> itself.
Here it is
table, th, td {
border: 1px solid black;
border-collapse: collapse;
padding: 6px;
}
<table>
<tr>
<td>Ajay</td>
<td ROWSPAN="3">Bild1</td>
<td>Bananas</td>
<td ROWSPAN="3">Bild2</td>
</tr>
<tr>
<td>Priya1</td>
<td>Bananas</td>
</tr>
<tr>
<td>Priya</td>
<td>Bananas</td>
</tr>
</table>
Related
I want to add borders to each of the sections in the table (Which means two borders separating the two sections. Assuming this table has headers already):
<table>
<section class="physicists">
<tr class="Richard-Feynman">
<td>Richard Feynman</td>
<td>Image1</td>
<td>Descrption1</td>
</tr>
<tr class="Albert-Einstein">
<td>Albert Einstein</td>
<td>Image2</td>
<td>Descrption2</td>
</tr>
</section>
<section class="martial-artists">
<tr class="Bruce-Lee">
<td>Bruce Lee</td>
<td>Image3</td>
<td>Descrption3</td>
</tr>
<tr class="Chunk-Norris">
<td>Chunk Norris</td>
<td>Image4</td>
<td>Descrption4</td>
</tr>
</section>
</table>
I was attempting with the following CSS code, but the border-bottom does not appear
section[class="physicists"] {
border-top: solid 3px;
border-bottom: solid 3px;
border-color: red;
}
Can anyone tell me what the issue is?
Use <tbody> instead of <section>
As others noted in the comments, <table> cannot contain <section> as its valid child element. Instead, <tbody> element is meant for this exact purpose.
1. An example with <th> as section heading
table {
border-collapse: collapse;
}
td, th {
padding: 5px;
background-color: #f0f0f0;
}
tbody > tr > th {
background: #c6c8d2;
}
tbody {
border-top: 3px solid red;
border-bottom: 3px solid red;
}
<table>
<tbody class="physicists">
<tr>
<th colspan="3">Physicists</th>
</tr>
<tr class="Richard-Feynman">
<td>Richard Feynman</td>
<td>Image1</td>
<td>Descrption1</td>
</tr>
<tr class="Albert-Einstein">
<td>Albert Einstein</td>
<td>Image2</td>
<td>Descrption2</td>
</tr>
</tbody>
<tbody class="martial-artists">
<tr>
<th colspan="3">Martial Artists</th>
</tr>
<tr class="Bruce-Lee">
<td>Bruce Lee</td>
<td>Image3</td>
<td>Descrption3</td>
</tr>
<tr class="Chunk-Norris">
<td>Chunk Norris</td>
<td>Image4</td>
<td>Descrption4</td>
</tr>
</tbody>
</table>
2. An example without section heading
table {
border-collapse: collapse;
}
td {
padding: 5px;
background-color: #f0f0f0;
}
tbody {
border-top: 3px solid red;
border-bottom: 3px solid red;
}
<table>
<tbody class="physicists">
<tr class="Richard-Feynman">
<td>Richard Feynman</td>
<td>Image1</td>
<td>Descrption1</td>
</tr>
<tr class="Albert-Einstein">
<td>Albert Einstein</td>
<td>Image2</td>
<td>Descrption2</td>
</tr>
</tbody>
<tbody class="martial-artists">
<tr class="Bruce-Lee">
<td>Bruce Lee</td>
<td>Image3</td>
<td>Descrption3</td>
</tr>
<tr class="Chunk-Norris">
<td>Chunk Norris</td>
<td>Image4</td>
<td>Descrption4</td>
</tr>
</tbody>
</table>
Apply border-collapse: collapse; to the parent table
When cells are separated, the distance between cells is defined by the border-spacing property.
border-collapse determines how the table cells would handle their borders. If not set, it's separate by default. For details, see this MDN page.
First bug:
At first, <section> element can't be used that way.
The table can be embedded in the section but not the other way around.
Split it to two tables like this:
<!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">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Eckert Művek Galéria</title>
</head>
<body>
<table class="physicists my-frame">
<tr class="Richard-Feynman">
<td>Richard Feynman</td>
<td>Image1</td>
<td>Descrption1</td>
</tr>
<tr class="Albert-Einstein">
<td>Albert Einstein</td>
<td>Image2</td>
<td>Descrption2</td>
</tr>
</table>
<table class="martial-artists my-frame">
<tr class="Bruce-Lee">
<td>Bruce Lee</td>
<td>Image3</td>
<td>Descrption3</td>
</tr>
<tr class="Chunk-Norris">
<td>Chunk Norris</td>
<td>Image4</td>
<td>Descrption4</td>
</tr>
</table>
<style>
.my-frame {
border-top: solid 3px;
border-bottom: solid 3px;
border-color: red;
width:100%;
margin-top:5px;
}
.my-frame td{
width:33%;
}
</style>
</body>
</html>
Second info:
This is not the best way to write selectors:
section[class="physicists"]{ /* ... */ }
Better is:
section.physicists{ /* ... */ }
I have an example on the snippet which has table and applied border-collapse:seperate property.But I dont want second row to have this rule.Is there anyway to turn this off for specific row?
<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
border: 1px solid black;
}
#table1 {
border-collapse: separate;
}
#table2 {
border-collapse: collapse;
}
</style>
</head>
<body>
<h2>border-collapse: separate</h2>
<table id="table1">
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
</body>
</html>
You can use some CSS selector such as nth-child or nth-of-type to turn on/off effect for specific row.
I have a little problem with the colspan and rowspan. I'm trying to make the following table:
I have tried to create it, but I have difficulties on the first row, second td when I put it colspan="2" and to get the third td and put it as rowspan="2". Is this table even possible to be created?
colspan means we just binding columns. whereas rowspan means we are binding rows.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div style="border: 1px solid black; width: 300px;">
<table style="color: grey;">
<tr>
<td style="border: 1px solid black; background-color: blue;">test</td>
<td colspan="2">colspan 2</td>
</tr>
<tr>
<td width="100px;">test</td>
<td width="100px;" style="border: 1px solid black; background-color: blue;">test</td>
<td width="100px;">test</td>
</tr>
<tr>
<td colspan="2">colspan 2</td>
<td style="border: 1px solid black; background-color: blue;">test</td>
</tr>
</table>
</div>
</body>
</html>
Hope this may help you.
My example code:
<!DOCTYPE html>
<html>
<body>
<h4>Two rows and three columns:</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>
</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>
<table border="1">
<tr>
<td>
test
</td>
<td>
<table border="1">
<tr>
<td>
test
</td>
<td>
wuut
</td>
</tr>
<tr>
<td>
test1
</td>
<td>
wuut1
</td>
</tr>
<tr>
<td>
test2
</td>
<td>
wuut2
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
<style>
table {
border-collapse: collapse;
}
</style>
You can just paste it here and see what it looks like : http://www.w3schools.com/html/tryit.asp?filename=tryhtml_tables
What I need is that when tables are inside each other, tables have like joined borders. Only tables that data are separated.
At the moment the right bottom corner of table has like 3 layers of border, but that just looks ugly.
I tried using CSS:
border-collapse: collapse;
But this just removed cellspacing for borders :/
It should look like this, but this is with colspan/rowspan, which is too messy:
<!DOCTYPE html>
<html>
<body>
<h4>Two rows and three columns:</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td colspan="3"> </td>
</tr>
<tr>
<td rowspan="3">400</td>
<td rowspan="3">500</td>
<td rowspan="3">test</td>
<td>test</td>
<td>wuut</td>
</tr>
<tr>
<td>test1</td>
<td>test2</td>
</tr>
<tr>
<td>wuut1</td>
<td>wuut2</td>
</tr>
</table>
</body>
</html>
Modify the program code that generates the markup so that there are no border=1 attributes and there are class attributes for td elements, controlling borders around each cell. The class attribute would corresponds to CSS settings that set a border on selected sides of a cell, e.g. <td class="left top"> with CSS code:
.left { border-left-style: solid }
.top { border-top-style: solid }
The width and color of borders you can set in one rule, like:
td { border-width: 1px; border-color: #333; }
You should still set table { border-collapse: collapse } and probably set padding: 0 on each cell that contains a table.
It’s a bit tricky, because the borders of nested tables are drawn separately. But you can tune things with some CSS3 so that they work in the desired way on modern browsers. (If you wish to achieve the effect on ancient browsers, too, you would need to scatter around a lot of class attributes.)
You need to remove the default cell spacing from (at least) cells containing tables. (The spacing between borders of inner and outer table come from the cells spacing.) This requires that each td that contains a table has a suitable class attribute, say class=containsTable, because in CSS you cannot refer to an element by its descendants (contents). Moreover, you need to selectively switch off top borders from the cells of the first row of any nested table, etc.:
.tableContainer { padding: 0; }
table table { border: none }
table table tr:first-child td { border-top: none; }
table table tr:last-child td { border-bottom: none; }
table table td:first-child { border-left: none; }
table table td:last-child { border-right: none; }
Try <table style="border:0;"> wont show borders if that's what your looking for and you can also be specific about which side you want to display like for example:
<table style="border-left:1px solid black;">
You can enter to the style border-(left,right,bottom,top):"pixels" "Type of border" "color".
<td style="border:0px;">
test
</td>
<td style="border:0px;">
wuut
</td>
</tr>
it wont show them. Or give them an ID and use <style type="text/css">
<style type="text/css">
#aa {border:0px;}
</style>
...
<td ID="aa">
...
if you can add ID="aa" to that loop then it should work.
I want to place text at center and at the bottom of the cell in table. How can I do this?
This is what I want:
CSS:
td {vertical-align:bottom;text-align:center;}
example: http://jsfiddle.net/vKPG8/
valign="bottom" might work.
http://www.w3schools.com/tags/att_td_valign.asp
But I think that's deprecated.
So you should do it in CSS with:
<td style="vertical-align:bottom;">your text</td>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
td{
vertical-align:bottom;
text-align:center;
}
<table>
<tr>
<td rowspan="3" width="100%">bottom and center</td>
</tr>
<tr>
<td rowspan="1">TOTAL</td>
</tr>
<tr>
<td rowspan="1">TOTAL</td>
</tr>
</table>
use style vertical-align:bottom;text-align:center; these can be helpful for your table.