I'm trying to duplicate the table below in HTML:
But there are a couple of extra-irregular shaped rows that I'm wondering if there's an easy way to code them using tables, particularly the Schools swim on Friday, and the rentals in the evening on Monday-Thursday.
I know how to use colspan and rowspan but is there some kind of grid design trick in tables these days?
What's the best way to code a table with unorthodox shapes for rows and columns like above?
Here's what I've built so far, but I don't know how to make the extra irregular shapes:
table,
th,
td,
tr {
border: 2px solid #263333;
border-collapse: collapse;
}
.schedule td {
width: 16.6666666%;
vertical-align: middle;
text-align: center;
padding: 0;
}
.schedule tr {
height: 3em
}
.schedule tr {
height: 3em
}
.schedule thead tr {
height: 1em;
color: #f2f5f7;
background: #263333
}
.noborder {
border: 0;
}
<table class="schedule">
<thead>
<tr>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
<th>Saturday</th>
</thead>
<tbody>
<tr>
<td colspan=4 rowspan=2>
<p>Early Bird Swim</p>
<p>6:00am-8:30am</p>
<td>Early Bird Swim
<br>6:00am-7:30am</td>
<td rowspan=2>Early Bird Swim
<br>6:00am-8:30am</td>
</tr>
<tr>
<td>Staff Meeting 7:30am-8:30am</td>
</tr>
<tr>
<td colspan=4 rowspan=2>Cardston Schools 8:30am-3:00pm</td>
<td>Cardston Schools 8:30am-12:00pm</td>
<td>Rentals 10:00am-12:00pm</td>
</tr>
<tr>
<td colspan=2>Lane Swim / Parent & Tot 12:00-1:00pm</td>
</tr>
<tr>
<td colspan=4>Swim Club 3:15-5:00pm</td>
<td colspan=2>Public Swim 1:00-5:00pm</td>
</tr>
<tr>
<td colspan=6>Lane Swim 5:00-6:00pm</td>
</tr>
<tr>
<td>Family 6-8:00pm</td>
<td colspan=5>Public Swim 6:00pm-8:00pm</td>
</tr>
<tr>
<td>Aqua Fit 8-9</td>
<td></td>
<td>Aqua Fit 8-9</td>
<td></td>
<td colspan=2>Rentals 8:00-10:00pm</td>
</tr>
<tr>
<td colspan=4>Rentals Until 10:00pm</td>
<td colspan=2>Rentals 9:00-10:00pm</td>
</tr>
</tbody>
</table>
You can use colspan and rowspan, but for certain cells, you'll need custom CSS for each cell. You can control the thickness and color of each side of the td cell:
.some-class {
border-left: 1px solid #000000;
border-right: 0px solid #000000;
}
etc., or in shorthand:
border: 1px 1px 0px 1px solid #000;
Related
I have wierd problem with my table,
As normal I want borders around my Table Heads and Table Cells,
But for some reason it only gives me a border around the whole table.
How can I fix this?
Images and code attached
How it looks
HTML;
<table width='100%'>
<tr>
<th>Maandag</th>
<th>Dinsdag</th>
<th>Woensdag</th>
<th>Donderdag</th>
<th>Vrijdag</th>
<th>Zaterdag</th>
<th>Zondag</th>
</tr>
<tr>
<td>#</td>
<td>#</td>
<td>#</td>
<td>#</td>
<td>#</td>
<td>#</td>
<td>#</td>
</tr>
</table>
CSS;
table, th, td {
background-color: white;
border: solid black 3px;
}
The code you posted in your your question does put borders not only around the whole table, but also around every td and th.
I suppose you might not want the cells to have seperate borders. In this case you should apply the borders only to td and th (i.e. the cells) and in addition apply border-collapse: collapse; to the table itself:
table {
border-collapse: collapse;
}
th,
td {
background-color: white;
border: solid black 3px;
}
<table width='100%'>
<tr>
<th>Maandag</th>
<th>Dinsdag</th>
<th>Woensdag</th>
<th>Donderdag</th>
<th>Vrijdag</th>
<th>Zaterdag</th>
<th>Zondag</th>
</tr>
<tr>
<td>#</td>
<td>#</td>
<td>#</td>
<td>#</td>
<td>#</td>
<td>#</td>
<td>#</td>
</tr>
</table>
The best way to approach this is to be careful with which CSS selectors you are using, and not use the table selector as a whole. For help with simple table values and alternatives, look at https://developer.mozilla.org/en-US/docs/Web/HTML/Element#table_content.
thead { background-color: white; border: solid black 3px; }
th{ background-color: white; border: solid black 3px; }
td{ background-color: white; border: solid black 3px; }
#remi03
can you try these codes
original:
bu kodları bir denermisiniz.
.baslik th{
border: solid maroon 2px;
padding: 0;
}
.icerik td{
border: solid dodgerblue 2px;
padding: 0;
}
<table width='100%'>
<tr class="baslik">
<th>Maandag</th>
<th>Dinsdag</th>
<th>Woensdag</th>
<th>Donderdag</th>
<th>Vrijdag</th>
<th>Zaterdag</th>
<th>Zondag</th>
</tr>
<tr class="icerik">
<td>#</td>
<td>#</td>
<td>#</td>
<td>#</td>
<td>#</td>
<td>#</td>
<td>#</td>
</tr>
</table>
Current HTML:
<section class="Product-Info">
<table>
<tr>
<th colspan="2">Product Infromation</th>
</tr>
<tr>
<th>Product Name:</th>
<td>Name</td>
</tr>
<tr>
<th>Product Description:</th>
<td>Description</td>
</tr>
</table>
</section>
Desired:
Question:
How can I add borders and width to my current HTML with CSS as the desired outcome?
What I have tried
I have tried the following css:
table {
border: 1px solid black;
}
This just puts a border around the table. How can I add it same as desired too?
table {
border-collapse: collapse;
/* if you don't add this line you will see "double" borders */
border: 1px solid black;
width: 100vw;
}
th{
color: white;
background-color: blue;
}
td{
background-color: white;
width: 70%;
}
td, th {
border: 1px solid black;
}
<section class="Product-Info">
<table>
<tr>
<th colspan="2">Product Infromation</th>
</tr>
<tr>
<th>Product Name:</th>
<td>Name</td>
</tr>
<tr>
<th>Product Description:</th>
<td>Description</td>
</tr>
</table>
</section>
Heres, your snippet!
simply this:
table {
border-collapse: collapse; /* if you don't add this line you will see "double" borders */
border: 1px solid black;
}
table th,
table td {
text-align: left;
border: 1px solid black;
}
demo here https://jsfiddle.net/3hpks1mL/
hope it help you
section {
width:100wh;
}
table{
width:100%
}
<section class="Product-Info">
<table border="1">
<tr>
<th colspan="2">Product Infromation</th>
</tr>
<tr>
<td>Product Name:</td>
<td >Name</td>
</tr>
<tr>
<td > Product Description:</td>
<td >Description</td>
</tr>
</table>
</section>
Fairly easy, in your example you just have to apply the desired background colour to the table header cells (th), like so:
th {
background: darkblue;
color: white; /* Assuming you don't want black text on dark blue. */
}
For the standard border around the table cells to disappear you have to simply collapse the border on the main table element, like so:
table {
border-collapse: collapse;
}
With that set you can now apply any border styling you want to your table, in any thickness, colour and style you want.
I'd go with the following:
table, th, td {
border: 1px solid black;
}
.Product-Info > table {
width: 100%;
table-layout: fixed;
border-collapse: collapse;
text-align: center;
}
.Product-Info tr > *:first-child {
background: blue;
color: white;
text-align: left;
}
.w-25 {
width: 25% !important;
max-width: 25% !important;
}
.text-center {
text-align: center !important;
}
<section class="Product-Info">
<table>
<colgroup>
<col class="w-25 blue">
<col class="">
</colgroup>
<tr>
<th colspan="2" class="text-center">Product Infromation</th>
</tr>
<tr>
<th class="text-left">Product Name:</th>
<td class="text-center">Name</td>
</tr>
<tr>
<th class="text-left">Product Description:</th>
<td class="text-center">Description</td>
</tr>
</table>
</section>
Extra information (The "copy-paste" snippet under #Random-COSMOS answer).
Table is block-level element
"A block-level element always starts on a new line and takes up the
full width available. https://www.w3schools.com/html/html_blocks.asp"
Set any width you want to the table (400px or 30%) ==> 100% in your case (100% of its parent).
<table style="width: 100%;">
To specify table borders in CSS, use the border property.
table, th, td {
border: 1px solid black;
}
Out of topic - Accessible tables
For Web Accessibility => Add relationship between header and data cells (scope="row" / scope="col").
Full article: https://www.w3.org/WAI/tutorials/tables/two-headers/
<table>
<tr>
<th scope="col" colspan="2">Product Infromation</th>
</tr>
<tr>
<th scope="row">Product Name:</th>
<td>Some Name</td>
</tr>
<tr>
<th scope="row">Product Description:</th>
<td>Some Description</td>
</tr>
</table>
Setting a table row's background color to grey, you'd get a table row that would look like this
+-------------------+--------------------+------------------------+---------------+
|Col1 | Col2 | Col3 | Numeric Column|
+------------ ------+--------------------+------------------------+---------------+
I want to be able to pad the left and right most texts however to get an effect like this
+----------------+------------------+----------------------+---------------+
| Col1 | Col2 | Col3 | Numeric Column|
+----------------+------------------+----------------------+---------------+
Is it possible? I want this effect for both rows and headers
Table HTML and CSS Below:
table {
border-collapse: separate;
border-spacing: 0 1rem;
font-size: 85%;
}
th {
letter-spacing: 1px;
padding-left: 1rem;
border: 0;
}
td {
background-color: grey;
border-radius: 5px;
border: 0;
}
<table class="content-table">
<thead>
<tr>
<th><strong>Name</strong></th>
<th><strong>Age</strong></th>
<th><strong>Height</strong></th>
<th><strong>Location</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td>Stephen Curry</td>
<td>27</td>
<td>1,91</td>
<td>Akron, OH</td>
</tr>
<tr>
<td>Klay Thompson</td>
<td>25</td>
<td>2,01</td>
<td>Los Angeles, CA</td>
</tr>
</tbody>
</table>
Edit:
Found an image by ueno on Dribbble that shows the effect I'm trying to achieve. In the image below, you can see that the table rows' background color slightly pass the text whereas on my table (2nd image), it does not. I understand that I can set text-align: center as some people are saying in the comments however I prefer the left align with just a bit of padding.
I'm not sure if this is what you mean but here is how you can center the text in the row.
An example plunker :
table {
border-collapse: separate;
border-spacing: 0 1rem;
font-size: 85%;
}
th {
letter-spacing: 1px;
padding-left: 1rem;
border: 0;
}
tr {
letter-spacing: 1px;
padding-left: 1rem;
border: 0;
}
td {
border-radius: 5px;
border: 0;
}
.text-center{
text-align: center;
}
tbody tr:nth-child(odd) {
background-color: grey;
}
<table class="content-table">
<thead>
<tr>
<th><strong>Name</strong></th>
<th class="text-center"><strong>Age</strong></th>
<th class="text-center"><strong>Height</strong></th>
<th><strong>Location</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td>Stephen Curry</td>
<td class="text-center">27</td>
<td class="text-center">1,91</td>
<td>Akron, OH</td>
</tr>
<tr>
<td>Klay Thompson</td>
<td class="text-center">25</td>
<td class="text-center">2,01</td>
<td>Los Angeles, CA</td>
</tr>
<tr>
<td>Klay Thompson</td>
<td class="text-center">25</td>
<td class="text-center">2,01</td>
<td>Los Angeles, CA</td>
</tr>
</tbody>
</table>
As you can see i have made an class called .text-center and attached it to the columns I have understood you want to be centered. You can create same classes for -right and -left alignment. And changed some tags as
th to tr in tbody. I hope this is what you mean.
Not quite sure if this is what you were trying to get but this achieves the effect you have shown in the ueno picture above.
table {
border-collapse: collapse;
width:100%;
padding-left:20px;
padding-right:20px;
}
td, th {
padding: 12px;
}
tr:nth-child(even){background-color: #f2f2f2;}
th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: white;
color: black;
<table class="content-table">
<thead>
<tr>
<th><strong>Name</strong></th>
<th><strong>Age</strong></th>
<th><strong>Height</strong></th>
<th><strong>Location</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td>Stephen Curry</td>
<td>27</td>
<td>1,91</td>
<td>Akron, OH</td>
</tr>
<tr>
<td>Klay Thompson</td>
<td>25</td>
<td>2,01</td>
<td>Los Angeles, CA</td>
</tr>
<tr>
<td>Stephen Curry</td>
<td>27</td>
<td>1,91</td>
<td>Akron, OH</td>
</tr>
<tr>
<td>Klay Thompson</td>
<td>25</td>
<td>2,01</td>
<td>Los Angeles, CA</td>
</tr>
</tbody>
</table>
I have a table that is controlled by a style sheet.
the table has been created from a poster which my boss wants it to look like. the problem i am having is on the poster there is a gap between two of the columns.
I have tried just putting two tables side by side however this caused me issues if viewed on a mobile devise, so i tried to add a column that had a border left and right and the same colour background as the rest of the page but i cant get rid of the top/bottom borders that are in place from the style sheet.
Style sheet.
.table__container {
overflow-x: scroll;
height: 100%;
width: 100%;
}
table {
border-collapse: collapse;
}
tr {
border-bottom: 0px dashed #DDD;
}
table tr th {
color: #88B53D;
}
table tr th, table tr td {
vertical-align: top;
}
.row__header {
border-top: 3px solid #DDD;
}
.row__header--day {
font-size: 1em;
text-transform: uppercase;
}
CSS on page
.nothing {
border-left: 1px solid #DDD;
border-right: 1px solid #DDD;
border-top: 0px;
border-bottom: 0px;
background-color: #eee;
}
HTML table
<div class="table__container">
<table width="100%">
<tr>
<th></th>
<th></th>
<th></th>
<td class="nothing">Gap should be here</td>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
<tr class="row__header" style="text-align:center;">
<th class="row__header--day"></th>
<td></td>
<td></td>
<td class="nothing">Gap should be here</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
The style sheet was provided to me as part of our branding so i cant mess with it too much.
Is this the expected result? If yes then I will add some explanation.
.table__container {
height: 100%;
width: 100%;
}
table tr td.gap{
width:40%;
text-align:center;
border:none;
}
table tr td{
border:1px solid #000
}
<div class="table__container">
<table width="100%">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td class="gap"></td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td class="gap"></td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
</div>
I have two tables that show data from database.
Now I set 1st table for headlines and 2nd table for the data.
I set like this
<table class="t_status">
<td>No</td>
<td>Name</td>
<td>Address</td>
</table>
In table #2
<table class="t_status">
<td>1</td>
<td>Michael</td>
<td>California</td>
<tr>
<td>2</td>
<td>Greg</td>
<td>LA</td>
Now facing the problem when data display, table 1 and table 2 set different width.
This is the CSS
table
{
empty-cells: show;
border-collapse: collapse;
width: 100%;
}
.t_status
{
border-collapse: collapse;
background: #fff;
border: 1px solid #d9d9d9;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;
width: 100%;
margin-top: -1px;
}
.t_status td, th
{
border-top: 1px solid #c0c0c0;
border-bottom: 1px solid #c0c0c0;
border-left: 1px solid #c0c0c0;
border-right: 1px solid #c0c0c0;
padding: 10px;
font-size: 40pt;
font-weight: bold;
}
.t_status td
{
color: #fff;
background-color: #000;
}
.t_status th
{
font-size: 40pt;
color: #fff;
}
Try to put them like this:
<table class="t_status">
<tr>
<td>No</td>
<td>Name</td>
<td>Address</td>
</tr>
</table>
and
<table class="t_status">
<tr>
<td>1</td>
<td>Michael</td>
<td>California</td>
</tr>
<tr>
<td>2</td>
<td>Greg</td>
<td>LA</td>
</tr>
</table>
if am correct you are using two tables for scrolling effect of head and data, so you will get table header for all the data.
to achieve this effect you can try using jquery table jtable
sample code
Your html syntax is incorrect. Use tr tags:-
<table class="t_status">
<tr>
<td>No</td>
<td>Name</td>
<td>Address</td>
</tr>
</table>
You should put all information into one table, thus you can assure that the rows have the same width.
<table class="t_status">
<thead>
<tr>
<th>No</th>
<th>Name</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Michael</td>
<td>California</td>
</tr>
<tr>
<td>2</td>
<td>Greg</td>
<td>LA</td>
</tr>
</tbody>
</table>
<thead></thead> and <tbody></tbody> are not necessary.
It seems that you have forgot the <tr> tags. By the way, if you want to preserve your markup (correct or not, but two different tables), you can try with nth selectors and give a fixed width to each cell:
.t_status td:nth-child(1) {
width:2em;
}
.t_status td:nth-child(2) {
width:5em;
}
.t_status td:nth-child(3) {
width:5em;
}
Here's a working example.