• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 138
  • Last Modified:

making a table

Hi,

Can someone write a small html compliant example. I just want some arial text and a small table:

Sentence one
Sentence two (red font)

Col1    Col 2   Col3   Col4
-------------------------------
x      |     y     |   z    |     ?
------------------------------
x      |     y     |   z    |     ?
------------------------------

That's all I need.

Thanks
0
DJ_AM_Juicebox
Asked:
DJ_AM_Juicebox
  • 3
  • 2
  • 2
1 Solution
 
fuzzboxerCommented:
This is pretty simple to do, but here you go anyways:

<table>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
<th>Col4</th>
</tr>
<tr>
<td>x</td>
<td>y</td>
<td>z</td>
<td>?</td>
</tr>
<tr>
<td>x</td>
<td>y</td>
<td>z</td>
<td>?</td>
</tr>
</table>
0
 
DJ_AM_JuiceboxAuthor Commented:
Yeah sorry I'm in a rush and have little html experience. What's the correct header I need for the page, don't I need something like:

<html>
<body>
    stuff you posted....
</body>
</html>
0
 
fuzzboxerCommented:
Oh you need the entire page?  Yea, what you posted should get the job done.  It's simple, but a good place to start learning.
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
DJ_AM_JuiceboxAuthor Commented:
last simple thing - how do I get a 1 pixel wide line between the rows and columns?
0
 
fuzzboxerCommented:
There are a couple of different options.  One is to use CSS which is a way to centralize all of your formatting changes.  Another is to apply the formatting directly to the elements.  Here is the second way:

<table border="1">
<tr bordercolor="#000000">
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
<th>Col4</th>
</tr>
<tr bordercolor="#000000">
<td>x</td>
<td>y</td>
<td>z</td>
<td>?</td>
</tr>
<tr bordercolor="#000000">
<td>x</td>
<td>y</td>
<td>z</td>
<td>?</td>
</tr>
</table>
0
 
jawahar_prasadCommented:
TRY THIS........... With cool formatting, which you can use it throughout your site

<html>
<head>
<title></title>
<style type="text/css">
<!--
.tbl {
      background-color: f4f4f4;
      border: 1px solid #4f4f4f;
}
.txt1 {
      font-family: tahoma, arial, verdana;
      font-size: 11px;
      font-weight: normal;
      color: #000000;
}
.txt2 {
      font-family: tahoma, arial, verdana;
      font-size: 11px;
      font-weight: bold;
      color: #FF0000;
}
.txt3 {
      font-family: tahoma, arial, verdana;
      font-size: 11px;
      font-weight: bold;
      color: #000000;
}
-->
</style>
</head>

<body>
<p class="txt1">Sentence One</p>
<p class="txt2">Sentence Two(Red Font)</p>
<table width="400" border="0" cellpadding="5" cellspacing="1" class="tbl">
  <tr>
    <td align="center" class="txt3">Col1</td>
    <td align="center" class="txt3">Col2</td>
    <td align="center" class="txt3">Col3</td>
    <td align="center" class="txt3">Col4</td>
  </tr>
  <tr>
    <td align="center" class="txt1">x</td>
    <td align="center" class="txt1">y</td>
    <td align="center" class="txt1">z</td>
    <td align="center" class="txt1">?</td>
  </tr>
  <tr>
    <td align="center" class="txt1">x</td>
    <td align="center" class="txt1">y</td>
    <td align="center" class="txt1">z</td>
    <td align="center" class="txt1">?</td>
  </tr>
</table>
</body>
</html>
0
 
jawahar_prasadCommented:
Hi.. You asked for lines between rows and columns... here it is..(the new code)
(Just copy paste, and execute the code)       :-)

<html>
<head>
<title></title>
<style type="text/css">
<!--
.tbl {
      background-color: 4f4f4f;
}
.txt1 {
      font-family: tahoma, arial, verdana;
      font-size: 11px;
      font-weight: normal;
      color: #000000;
}
.txt2 {
      font-family: tahoma, arial, verdana;
      font-size: 11px;
      font-weight: bold;
      color: #FF0000;
}
.tblheader {
      font-family: tahoma, arial, verdana;
      font-size: 11px;
      font-weight: bold;
      color: #000000;
      background-color: #FFFFFF;
}
.tbltxt {
      font-family: tahoma, arial, verdana;
      font-size: 11px;
      font-weight: normal;
      color: #000000;
      background-color: #FFFFFF;
}
-->
</style>
</head>

<body>
<p class="txt1">Sentence One</p>
<p class="txt2">Sentence Two(Red Font)</p>
<table width="400" border="0" cellpadding="5" cellspacing="1" class="tbl">
  <tr>
    <td align="center" class="tblheader">Col1</td>
    <td align="center" class="tblheader">Col2</td>
    <td align="center" class="tblheader">Col3</td>
    <td align="center" class="tblheader">Col4</td>
  </tr>
  <tr>
    <td align="center" class="tbltxt">x</td>
    <td align="center" class="tbltxt">y</td>
    <td align="center" class="tbltxt">z</td>
    <td align="center" class="tbltxt">?</td>
  </tr>
  <tr>
    <td align="center" class="tbltxt">x</td>
    <td align="center" class="tbltxt">y</td>
    <td align="center" class="tbltxt">z</td>
    <td align="center" class="tbltxt">?</td>
  </tr>
</table>
</body>
</html>
0

Featured Post

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

  • 3
  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now