Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed last month.
Improve this question
Here is how it should look
Here how it looks
`
https://codepen.io/SevastianBah/pen/VwBaPVB
`
I suppose that it is related some how to the big red block. In code inspector, there is no any margins or paddings for block.
I have gone through your code pen. You tried to demonstrate the table using nested table inside the tag. However it can may be fulfill your target. But using colspan and rowspan property you can easily demonstrate the table.
Here I have demonstrated it using colspan rowspan. Well the concept is pretty easier. Look carefully at your targeted table. There you can easily equally divided each cells in total 4 rows and 3 columns. Where the 1st cell taken two column and two row. So we declared colspan value 2 and rowspan value 2. These will allow the cell to take two rows and two column. then the rest td will represent other cells. So as 1st td taken 2 columns and two rows so in 1st and second rows total td will be 3 and 2. but in third row each td will take one cell.
In css the border collapse will remove the spaces in between. Then you can add border to each td. Go through the code below. Hope this might help you.
table{
width: 600px;
height: 400px;
border-collapse: collapse;
}
td{
border: 2px solid black
}
<!DOCTYPE html>
<html>
<head>
<title>Table</title>
</head>
<body>
<table>
<tr>
<td style='background-color: red' colspan='2' rowspan='2'></td>
<td style='background-color: blue'></td>
<td style='background-color: red'></td>
</tr>
<tr>
<td style='background-color: red'></td>
<td style='background-color: blue'></td>
</tr>
<tr>
<td style='background-color: red'></td>
<td style='background-color: blue'></td>
<td style='background-color: red'></td>
<td style='background-color: blue'></td>
</tr>
</table>
</body>
</html>
Float td left:
td{
margin: 0;
padding: 0;
float: left;
}
.big{
width: 240px;
height: 240px;
}
.small{
width: 120px;
height: 120px;
}
.red{
background-color: red;
}
.blue{
background-color: blue;
}
div{
border: 2px black solid;
}
td{
margin: 0;
padding: 0;
float: left;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="/css/style.css" type="text/css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<table>
<tr>
<td><div class="big red"></div></td>
<td>
<table>
<tr>
<td><div class="small blue"></div></td>
<td><div class="small red"></div></td>
</tr>
<tr>
<td><div class="small red"></div></td>
<td><div class="small blue"></div></td>
</tr>
</table>
</td>
</tr>
<tr>
<td><div class="small red"></div></td>
<td><div class="small blue"></div></td>
<td><div class="small red"></div></td>
<td><div class="small blue"></div></td>
</tr>
</table>
</body>
</html>
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
The code I wish to learn how to code with HTML <Math> is in the table below
They want more details:
Coding parenthesis around fractions
Coding fractions
Coding radical signs (third root in the example)
Coding exponential notation (I used x<sup>y</sup>)
…
<!DOCTYPE html>
<html>
<head>
<style>
.M {
vertical-align: middle
}
OLi {
text-decoration: overline;
display: inline
}
/* used for top of radical sign */
BF {
font-size: 180%
}
/* for large parentheses around fractions */
.TF {
border-bottom: 2px solid black
}
/* to put fraction line below numerator */
.C {
text-align: center
}
</style>
</head>
<body>
<table style="font-size: 14pt; font-family; New Times Roman">
<colgroup>
<col span='2' style='min-width:4in'>
</colgroup>
<tr>
<td class='M'>
<table class='MATH'>
<tr>
<td rowspan='2'>log<sub>b</sub>
<BF>(</BF>
</td>
<td class='TF C'>√<sup>3</sup>
<OLi><i>x</i></OLi><i>y</i><sup>4</sup>
</td>
<td rowspan='2'>
<BF>)</BF> = log<sub>b</sub> √<sup>3</sup>
<OLi><i>x</i></OLi> + log<sub>b</sub> <i>y</i><sup>4</sup> -
log<sub>b</sub> <i>z</i><sup>5</sup>
</td>
</tr>
<tr>
<td class='C'><i>z</i><sup>5</sup></td>
</tr>
</table>
</td>
<td class='M' style="position:relative; top:8px">
<table>
<tr>
<td rowspan='2'>since log<sub>b</sub></td>
<td class='TF C'><i>mn</i></td>
<td rowspan='2'> = log<sub>b</sub> <i>m</i> +
log<sub>b</sub> <i>n</i></sup> - log<sub>b</sub> <i>p</i></td>
</tr>
<tr>
<td class='C'>
<i>p</i></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</body>
</html>
Well, I haven't done much of maths in html. But, I can suggest you to use a javascript library, you can try https://www.mathjax.org/ . Its pretty cool from the docs. You should be able to use reading docs.
I am writing an html email using inline styles since I'll be sending it in Outlook and read that's the best way to circumvent browser reformatting. I want to center the two links below, which I put into table cells because that's the only way I could get padding to work in Outlook. I would like the 2 links to appear centered with their background and padding on the page, but I don't know how to do that using inline styling and tables. Can anyone help? Thanks!
<!DOCTYPE html>
<html>
<head>
<title>email blast re films</title>
</head>
<body>
<table>
<tr>
<td style="padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px; font-size: 14px; background: #3D87F5; color: white;">
Watch my film "wall cuts, train stations, New York City"
</td>
</tr>
</table>
<table>
<tr>
<td style="padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px; font-size: 14px; background: #3D87F5; color: white;">
Watch my film "red hook, rush hour"
</td>
</tr>
</table>
<table>
<tr>
<td style="font-size: 14px; text-align: center; padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px; background: #3A8E47;">
<a href="http://www.bartonlewisfilm.com" style="display: inline-block; padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px; background: #3A8E47;
text-decoration: none; color: white;" title="visit bartonlewisfilm.com" target="_blank;">bartonlewisfilm.com</a> | home (718) 399-8344 | cell (347) 325-4415
</td>
</tr>
</table>
</body>
</html>
First, instead of using padding on each cell, you can just specify cellpadding attribute for a table tag -
<table cellpadding="10">
The cell content is centered by default -
<table cellpadding="10">
<tr>
<td style="background-color: red;">
Link 1<br/>
Link 2
</td>
</tr>
<tr>
<td style="background-color: red;">
Link 1<br/>
Link 2
</td>
</tr>
</table>
UPD
To center the whole table, set margin to 0 auto -
<table style="margin: 0 auto;">
To center only either a row or a column, apply accordingly -
<tr style="width: 50%; margin: 0 auto; display: table;"></tr>
or
<td style="width: 50%; margin: 0 auto; display: table;"></td>
You add an align attribute to the td cell.
<td align="center" style="padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px; font-size: 14px; background: #3D87F5; color: white;"> Your link
</td>
Adding margin to body tag, will that work for you.
<body style="margin-top:20%;margin-bottom:20%;margin-left:30%;">
Use text-align:center, vertical-align:middle,
table{width:100%;height:100%;}
td{width:100%;height:100%; text-align:center; vertical-align:middle; font-size: 14px; }
a, a:link, a:visited{padding:10px; display:inline-block; color: white; text-decoration: none;margin:10px; background: #3D87F5; }
<!DOCTYPE html>
<html>
<head>
<title>email blast re films</title>
</head>
<body>
<div id="centerme">
<table>
<tr>
<td>
Watch my film "wall cuts, train stations, New York City"
<br/>
Watch my film "red hook, rush hour"
</td>
</tr>
</table>
</div>
</body>
</html>
Check out this html. Appears fine to me.
<!DOCTYPE html>
<html>
<head>
<title>email blast re films</title>
</head>
<body style="height:height:500px;">
<table border="0" style="width:100%; text-align:center;">
<tr>
<td >
<span style="border-radius: 5px;display:block;margin-left:20%;margin-right:20%;margin-top:10%;padding-top:10px;padding-right:10px;padding-bottom:10px; font-size: 14px; background: #3D87F5; color: white;">Watch my film "wall cuts, train stations, New York City"</span>
<span style="display:block;margin-left:20%;margin-right:20%;padding-top:10px;padding-right:10px;padding-bottom:10px; font-size: 14px; color: white;border-radius:5px;"> </span>
<span style="border-radius: 5px;display:block;margin-left:20%;margin-right:20%;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px; font-size: 14px; background: #3D87F5; color: white;">Watch my film "red hook, rush hour"</span>
<span style="display:block;margin-left:20%;margin-right:20%;padding-top:10px;padding-right:10px;padding-bottom:10px; font-size: 14px; color: white;border-radius:5px;"> </span>
</td>
</tr>
<tr>
<td style="font-size: 14px; text-align: center; padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px; background: #3A8E47;">
<a href="http://www.bartonlewisfilm.com" style="display: inline-block; padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px; background: #3A8E47;
text-decoration: none; color: white;" title="visit bartonlewisfilm.com" target="_blank;">bartonlewisfilm.com</a> | home (718) 399-8344 | cell (347) 325-4415
</td>
</tr>
</table>
</body>
</html>
I have a table with 2 columns and on each column I have a different size of font (the bigger size font also strong).
My problem is the vertical alignment of the text: it doesn't align vertically (see the image):
Here's my html code:
<html>
<head>
<style>
.big-text-size {
font-size: 3.5em;
}
.small-text-size {
font-size: 1.1em;
}
</style>
</head>
<body>
<table>
<td class="big-text-size">
<strong>My doctor's name</strong>
</td>
<td class="small-text-size"> Daniel Boro </td>
</table>
</body>
</html>
Any suggestions why does it happen?
Tweak the vertical alignment of your different-size-text (see here):
<html>
<head><style>
.big-text-size {
font-size: 3.5em;
vertical-align: text-bottom;
}
.small-text-size {
font-size: 1.1em;
vertical-align: text-bottom;
}
</style></head>
<body>
<table>
<td class="big-text-size">
<strong>My doctor's name</strong>
</td>
<td class="small-text-size"> Daniel Boro </td>
</table>
</body>
</html>
Your second table doesn't have any rows...
<table>
<tr> <!-- Missing -->
<td class="small-text-size">Daniel Boro</td>
<td class="big-text-size"><strong>My doctor's name</strong></td>
</tr>
</table>
try including rows in your table..
you can also visit this site http://daker.me/2014/04/4-css-tricks-for-vertical-alignment.html It provides 4 CSS tricks that you can use to align text vertically in a table cell
I am having trouble centering my table in html as I am trying to create a web page for a class.
This is what I have entered into html:
<table align="center" width="50%">
<tr>
<td><b>Resume:</b></td>
<td>Click here to download my resume.</td>
</tr>
<tr>
<td><b>LinkedIn:</b></td>
<td>Click here to open my LinkedIn profile.</td>
</tr>
</table>
However, whenever I try to add 'align' and 'width' in the attribute, it only affects my width. It doesn't center the table.
Does anyone know of a way to both center the table in the page while applying width?
Thank you. I can provide the markup of my html page if needed.
Try this:
<table style="margin:0px auto; width:500px">
However align is obsolete so you may try this:
table {
width:500px;
margin: 10px auto;
}
ie, give width to your table and set margin auto horizontal
just add this to your table
table {
text-align: center;
}
Live Demo
try to put it inside
<p align="center">
<table align="center" width="50%">
<tr>
<td><b>Resume:</b></td>
<td>Click here to download my resume.</td>
</tr>
<tr>
<td><b>LinkedIn:</b></td>
<td>Click here to open my LinkedIn profile.</td>
</tr>
</table>
</p>
Enclose your table in a wrapping div:
<div class="wrapper">
<table>
<tr>
<td><b>Resume:</b></td>
<td>Click here to download my resume.</td>
</tr>
<tr>
<td><b>LinkedIn:</b></td>
<td>Click here to open my LinkedIn profile.</td>
</tr>
</table>
</div>
And then in your css file (if you want to centre the text too):
table {
text-align: center;
width: 50%
}
.wrapper {
margin: 0 auto;
}
You can't center an element without defining the width of its outside container. Let me show you a better way to set it up.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#outside-container {
width: 100%;
}
#form-container {
width: 50%;
margin: 0px auto;
}
</style>
</head>
<body>
<div id="outside-container">
<div id="form-container">
<table align="center">
<tr>
<td><b>Resume:</b></td>
<td>Click here to download my resume.</td>
</tr>
<tr>
<td><b>LinkedIn:</b></td>
<td>Click here to open my LinkedIn profile.</td>
</tr>
</table>
</div> <!-- CLOSE #form-container -->
</div> <!-- CLOSE #outside-container -->
</body>
</html>
I have created simple table inside a table with border
//Top Table
<table border="5" bordercolor="#36C1DF" class="topCss" >
//rest table
<tr>
<td>
//This table Border is the problem in IE
<TABLE class="innerCss">
</td>
</tr>
// And my below are css settings
.topCss
{
border-collapse: separate;
border-style: solid;
border-bottom-right-radius:12px;
border-bottom-left-radius:12px;
}
.innerCss
{
border:2px solid #ffffff;
}
Actually above table border color white is working fine in Chrome and FireFox but in IE is actually looking black insted of white color.
Please help how to get white color border in IE-9
I'm no expert but I'd suggest that you skip HTML styling and use CSS (preferably not inline):
<table style="border: 2px solid #fff;">
//rest table
Note: Remove the border and bordercolor HTML attributes.
use css:
table{
border:2px solid #ffffff;
}
If you want td color white also , then add this code more:
table tr td{
border:2px solid #ffffff;
}
Try these total code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
body{
background:#000;
color:#fff;}
.topCss
{
border:5px solid #36C1DF;
border-collapse: separate;
border-style: solid;
border-bottom-right-radius:12px;
border-bottom-left-radius:12px;
}
.innerCss
{
border:2px solid #ffffff;
}
</style>
</head>
<body>
<!--
//Top Table-->
<table class="topCss" >
<!-- //rest table -->
<tr>
<td>
<!-- //This table Border is the problem in IE-->
<TABLE class="innerCss" >
<tr><td> cell 1 </td> <td>cell 2</td></tr>
</TABLE>
</td>
</tr>
</table>
</body>
</html>
May be it will help you :
<!--
//Top Table-->
<table class="topCss" style="border: 5px solid #36C1DF;" >
<!-- //rest table -->
<tr >
<td >
<!-- //This table Border is the problem in IE-->
<TABLE class="innerCss" style="border: 2px solid #fff;" >
<tr ><td> cell 1 </td> <td>cell 2</td></tr>
</TABLE>
</td>
</tr>
</table>
Please udate your code with
<table bordercolor='white' style="border-style:none;">
please remove border='2'. Try this, should work